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>
2020-02-11 11:02:41 -06:00 · 2020-02-11 11:02:41 -06:00 · 86fdba177a
commit 86fdba177a
parent e704f7fae7
112 changed files with 1387 additions and 1122 deletions
--- 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,