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

app/assets/javascripts/lib/utils/icons_path.js

+// 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;

app/assets/javascripts/vue_shared/components/icon.vue

 <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}`;

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) {
@@ -157,8 +163,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',
       },
       {