From 7d68ac70aa111ab17cfb01e12ace7fa09fedb90b Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Mon, 29 Jul 2019 15:25:35 -0500
Subject: [PATCH] Use file-loader to import icon sprites

---
 app/assets/javascripts/vue_shared/components/icon.vue | 4 +++-
 config/webpack.config.js                              | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

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 cd793743eb7..f00a9ac0df9 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -156,8 +156,16 @@ module.exports = {
         exclude: /node_modules/,
         loader: 'graphql-tag/loader',
       },
+      {
+        test: /icons\.svg$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[hash:8].[ext]',
+        },
+      },
       {
         test: /\.svg$/,
+        exclude: /icons\.svg$/,
         loader: 'raw-loader',
       },
       {