Improve SVG icon handling

8 files changed, 24 insertions, 177 deletions

diff --git a/commands/frontend.rb b/commands/frontend.rb
index d8e662fd..7f93d113 100644
--- a/commands/frontend.rb
+++ b/commands/frontend.rb
@@ -28,17 +28,8 @@ run do |opts, args, cmd|
     ERROR
   end
 
-  puts 'Creating icons.svg ...'
-  root = File.expand_path('../', __dir__)
-  path = 'node_modules/@gitlab/svgs/dist/icons.svg'
-
-  if File.write('public/assets/images/icons.svg', File.read("#{root}/#{path}"))
-    puts 'Done!'
-  else
-    puts 'Failed to create icons.svg!'
-  end
-
   puts 'Copying GitLab UI CSS sourcemaps...'
+  root = File.expand_path('../', __dir__)
   gl_ui_src = 'node_modules/@gitlab/ui/dist'
   gl_ui_dest = 'public/frontend/shared'
 
diff --git a/content/frontend/shared/components/gl_icon.vue b/content/frontend/shared/components/gl_icon.vue
deleted file mode 100644
index 73bd0124..00000000
--- a/content/frontend/shared/components/gl_icon.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-import data from '@gitlab/svgs/dist/icons.json';
-import { iconSizeOptions } from '../constants';
-
-let iconValidator = () => true;
-
-const { icons } = data;
-iconValidator = (value) => {
-  if (icons.includes(value)) {
-    return true;
-  }
-  // eslint-disable-next-line no-console
-  console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
-  return false;
-};
-
-/** This is a re-usable vue component for rendering a svg sprite icon
- *  @example
- *  <icon
- *    name="retry"
- *    :size="32"
- *    class="top"
- *  />
- */
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true,
-      validator: iconValidator,
-    },
-    size: {
-      type: Number,
-      required: false,
-      default: 16,
-      validator: (value) => iconSizeOptions.includes(value),
-    },
-    className: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-
-  computed: {
-    iconSizeClass() {
-      return this.size ? `s${this.size}` : '';
-    },
-    iconHref() {
-      return `#${this.name}`;
-    },
-  },
-};
-</script>
-
-<template>
-  <svg :class="['gl-icon', iconSizeClass, className]">
-    <use :href="iconHref" />
-  </svg>
-</template>
diff --git a/content/frontend/shared/constants.js b/content/frontend/shared/constants.js
deleted file mode 100644
index 0fc7a0b1..00000000
--- a/content/frontend/shared/constants.js
+++ /dev/null
@@ -1 +0,0 @@
-export const iconSizeOptions = [8, 10, 12, 14, 16, 18, 24, 32, 48, 72];
diff --git a/package.json b/package.json
index c0715237..7940dde2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-url": "^7.0.0",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
     "babel-jest": "^28.1.2",
@@ -44,7 +45,6 @@
     "@gitlab/svgs": "^2.25.0",
     "@gitlab/ui": "^42.12.0",
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-image": "^2.1.1",
     "algoliasearch": "^4.13.1",
     "bootstrap": "^4.6.1",
     "clipboard": "^2.0.11",
diff --git a/rollup.config.js b/rollup.config.js
index 8836b1e2..4fd51b49 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -7,7 +7,7 @@ const commonjs = require('@rollup/plugin-commonjs');
 const { babel } = require('@rollup/plugin-babel');
 const importResolver = require('rollup-plugin-import-resolver');
 const css = require('rollup-plugin-import-css');
-const image = require('@rollup/plugin-image');
+const url = require('@rollup/plugin-url');
 const vue = require('rollup-plugin-vue');
 
 function mapDirectory(file) {
@@ -27,7 +27,11 @@ module.exports = glob.sync('content/frontend/**/*.js').map((file) => ({
       requireReturnsDefault: 'preferred',
     }),
     vue(),
-    image(),
+    url({
+      destDir: 'public/assets/images',
+      publicPath: '/assets/images/',
+      fileName: 'icons.svg',
+    }),
     inject({
       exclude: 'node_modules/**',
     }),
diff --git a/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap b/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap
deleted file mode 100644
index be478d99..00000000
--- a/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GlIcon component when created shows svg class "s8" and path "/path/to/icons.svg#check-circle" 1`] = `
-"<svg class=\\"gl-icon s8\\">
-  <use href=\\"#check-circle\\"></use>
-</svg>"
-`;
diff --git a/spec/frontend/shared/components/gl_icon_spec.js b/spec/frontend/shared/components/gl_icon_spec.js
deleted file mode 100644
index 76239651..00000000
--- a/spec/frontend/shared/components/gl_icon_spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import GlIcon from '../../../../content/frontend/shared/components/gl_icon.vue';
-import { iconSizeOptions } from '../../../../content/frontend/shared/constants';
-
-const ICONS_PATH = '/path/to/icons.svg';
-const TEST_SIZE = 8;
-const TEST_NAME = 'check-circle';
-
-const localVue = createLocalVue();
-
-jest.mock('@gitlab/svgs/dist/icons.svg', () => '/path/to/icons.svg');
-
-describe('GlIcon component', () => {
-  let wrapper;
-  let consoleSpy;
-
-  const createComponent = (props) => {
-    wrapper = shallowMount(GlIcon, {
-      propsData: {
-        size: TEST_SIZE,
-        name: TEST_NAME,
-        ...props,
-      },
-      localVue,
-    });
-  };
-
-  const validateSize = (size) => GlIcon.props.size.validator(size);
-  const validateName = (name) => GlIcon.props.name.validator(name);
-
-  afterEach(() => {
-    wrapper.destroy();
-
-    if (consoleSpy) {
-      consoleSpy.mockRestore();
-    }
-  });
-
-  describe('when created', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it(`shows svg class "s${TEST_SIZE}" and path "${ICONS_PATH}#${TEST_NAME}"`, () => {
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-
-  describe('size validator', () => {
-    const maxSize = Math.max(...iconSizeOptions);
-
-    it('fails with size outside options', () => {
-      expect(validateSize(maxSize + 10)).toBe(false);
-    });
-
-    it('passes with size in options', () => {
-      expect(validateSize(maxSize)).toBe(true);
-    });
-  });
-
-  describe('name validator', () => {
-    it('fails with name that does not exist', () => {
-      const badName = `${TEST_NAME}-bogus-zebra`;
-      consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
-
-      expect(validateName(badName)).toBe(false);
-
-      expect(consoleSpy).toHaveBeenCalledWith(
-        `Icon '${badName}' is not a known icon of @gitlab/svgs`,
-      );
-    });
-
-    it('passes with name that exists', () => {
-      expect(validateName(TEST_NAME)).toBe(true);
-    });
-  });
-});
diff --git a/yarn.lock b/yarn.lock
index d9a88043..e507015b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1486,14 +1486,6 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
-"@rollup/plugin-image@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.1.1.tgz#898d6b59ac0025d7971ef45640ab330cb0663b0c"
-  integrity sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==
-  dependencies:
-    "@rollup/pluginutils" "^3.1.0"
-    mini-svg-data-uri "^1.2.3"
-
 "@rollup/plugin-inject@^4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-4.0.4.tgz#fbeee66e9a700782c4f65c8b0edbafe58678fbc2"
@@ -1530,6 +1522,15 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
+"@rollup/plugin-url@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-url/-/plugin-url-7.0.0.tgz#571f6fd51c3d0e00f7404c67efdb93492bfac7f8"
+  integrity sha512-cIWcEObrmEPAU8q8NluGWlCPlQDuoSKvkyI3eOFO4fx6W02mLNj4ZEiUT0X2mKMIvQzoWL1feEK9d1yr1ICgrw==
+  dependencies:
+    "@rollup/pluginutils" "^4.2.1"
+    make-dir "^3.1.0"
+    mime "^2.4.6"
+
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -1539,7 +1540,7 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.2.0":
+"@rollup/pluginutils@^4.2.0", "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@@ -5210,7 +5211,7 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0:
+make-dir@^3.0.0, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -5363,6 +5364,11 @@ mime@^1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@^2.4.6:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
+  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -5373,11 +5379,6 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-svg-data-uri@^1.2.3:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
-  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
-
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"