Merge branch 'mg-update-icons-svg-import' into 'master'

Use file-loader for sprite icons within icon.vue

See merge request gitlab-org/gitlab-ce!31257

3 files changed, 20 insertions, 1 deletions

diff --git a/app/assets/javascripts/lib/utils/icons_path.js b/app/assets/javascripts/lib/utils/icons_path.js
new file mode 100644
index 00000000000..1a1c3c8e7b3
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/icons_path.js
@@ -0,0 +1,3 @@
+// any import of '@gitlab/svgs/dist/icons.svg' will be overridden with this
+// to avoid asset duplication between sprockets and webpack
+export default gon && gon.sprite_icons;
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 41c4c861566..fa89473da62 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -1,4 +1,6 @@
 <script>
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+
 // only allow classes in images.scss e.g. s12
 const validSizes = [8, 10, 12, 14, 16, 18, 24, 32, 48, 72];
 let iconValidator = () => true;
@@ -84,7 +86,7 @@ export default {
 
   computed: {
     spriteHref() {
-      return `${gon.sprite_icons}#${this.name}`;
+      return `${iconsPath}#${this.name}`;
     },
     iconTestClass() {
       return `ic-${this.name}`;
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 4b6a9e4b99e..442b4b4c21e 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -90,6 +90,12 @@ const alias = {
 
   // the following resolves files which are different between CE and EE
   ee_else_ce: path.join(ROOT_PATH, 'app/assets/javascripts'),
+
+  // override loader path for icons.svg so we do not duplicate this asset
+  '@gitlab/svgs/dist/icons.svg': path.join(
+    ROOT_PATH,
+    'app/assets/javascripts/lib/utils/icons_path.js',
+  ),
 };
 
 if (IS_EE) {
@@ -158,7 +164,15 @@ module.exports = {
         loader: 'graphql-tag/loader',
       },
       {
+        test: /icons\.svg$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[hash:8].[ext]',
+        },
+      },
+      {
         test: /\.svg$/,
+        exclude: /icons\.svg$/,
         loader: 'raw-loader',
       },
       {