Add Octicon SVG spritemap (#10107)

* Add octicon SVG sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Static prefix

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* SVG for all repo icons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make vendor

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap out octicons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move octicons to top of less imports

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix JS

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Definitely not a search/replace

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed regex

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move to more generic calls and webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make svg -> make webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg-sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed a test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg from makefile

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Suggestions

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Attempt to fix test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert timetracking test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap .octicon for .svg in less

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add aria-hidden

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Replace mega-octicon

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix webpack globbing on Windows

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert

Co-Authored-By: silverwind <me@silverwind.io>

* Fix octions from upstream

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix Vue and missed JS function

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add JS helper and PWA

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Preload SVG

Signed-off-by: jolheiser <john.olheiser@gmail.com>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <matti@mdranta.net>

1 files changed, 32 insertions, 2 deletions

diff --git a/webpack.config.js b/webpack.config.js
index 08926bf58a..c3d3ad88e0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,14 +5,17 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const PostCSSPresetEnv = require('postcss-preset-env');
 const PostCSSSafeParser = require('postcss-safe-parser');
+const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const { statSync } = require('fs');
 const { resolve, parse } = require('path');
 const { SourceMapDevToolPlugin } = require('webpack');
 
+const glob = (pattern) => fastGlob.sync(pattern, { cwd: __dirname, absolute: true });
+
 const themes = {};
-for (const path of fastGlob.sync(resolve(__dirname, 'web_src/less/themes/*.less'))) {
+for (const path of glob('web_src/less/themes/*.less')) {
   themes[parse(path).name] = [path];
 }
 
@@ -29,6 +32,7 @@ module.exports = {
     jquery: [
       resolve(__dirname, 'web_src/js/jquery.js'),
     ],
+    icons: glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
     ...themes,
   },
   devtool: false,
@@ -140,12 +144,35 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'svg-sprite-loader',
+            options: {
+              extract: true,
+              spriteFilename: 'img/svg/icons.svg',
+              symbolId: (path) => {
+                const { name } = parse(path);
+                if (/@primer[/\\]octicons/.test(path)) {
+                  return `octicon-${name}`;
+                }
+                return name;
+              },
+            },
+          },
+          {
+            loader: 'svgo-loader',
+          },
+        ],
+      },
     ],
   },
   plugins: [
     new VueLoaderPlugin(),
-    // needed so themes don't generate useless js files
+    // avoid generating useless js output files for css- and svg-only chunks
     new FixStyleOnlyEntriesPlugin({
+      extensions: ['less', 'scss', 'css', 'svg'],
       silent: true,
     }),
     new MiniCssExtractPlugin({
@@ -158,6 +185,9 @@ module.exports = {
         'js/index.js',
       ],
     }),
+    new SpriteLoaderPlugin({
+      plainSprite: true,
+    }),
   ],
   performance: {
     maxEntrypointSize: 512000,