feat: update Webpack build to minify SVG icons through SVGO — used for server-side pre-rendering SVGs

Author: sghoweri

packages/build-tools/create-webpack-config.js

@@ -15,6 +15,7 @@ const WriteFilePlugin = require('write-file-webpack-plugin');
 const npmSass = require('npm-sass');
 const merge = require('webpack-merge');
 const SassDocPlugin = require('@bolt/sassdoc-webpack-plugin');
+const svgoConfig = require('./svgo-config');
 const { getConfig } = require('@bolt/build-utils/config-store');
 const { boltWebpackProgress } = require('@bolt/build-utils/webpack-helpers');
 const {
@@ -269,6 +270,35 @@ async function createWebpackConfig(buildConfig) {
     },
     module: {
       rules: [
+        // @todo: uncomment once future updates to handle SVG icon spritesheet in place
+        // {
+        //   test: /\.svg$/,
+        //   include: path.dirname(require.resolve('@bolt/components-icons/package.json')),
+        //   use: [
+        //     'svg-sprite-loader',
+        //     'svgo-loader'
+        //   ]
+        // },
+
+        // minify non spritesheet SVGs icons
+        {
+          test: /\.svg$/,
+          // exclude: ,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: path.join(path.dirname(require.resolve('@bolt/components-icons/package.json')), 'dist/[name].min.[ext]',)
+              },
+            },
+            {
+              loader: 'svgo-loader',
+              options: {
+                plugins: svgoConfig,
+              },
+            },
+          ],
+        },
         {
           test: /\.(ts|tsx)$/,
           loader: 'ts-loader',
@@ -314,7 +344,7 @@ async function createWebpackConfig(buildConfig) {
           },
         },
         {
-          test: /\.(cur|svg)$/,
+          test: /\.(cur)$/,
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',

packages/build-tools/package.json

@@ -15,12 +15,12 @@
   "bin": {
     "bolt": "index.js"
   },
-  "browserslist": [
-    "extends @bolt/browserslist-config"
-  ],
   "scripts": {
     "test": "FORCE_COLOR=1 npx lerna exec --scope @bolt/build-tools--test* --concurrency 1 -- npm run test"
   },
+  "browserslist": [
+    "extends @bolt/browserslist-config"
+  ],
   "dependencies": {
     "@babel/core": "^7.4.5",
     "@bolt/api": "^2.6.0",
@@ -56,7 +56,7 @@
     "eslint": "^5.16.0",
     "eslint-loader": "^2.1.2",
     "express": "^4.17.1",
-    "file-loader": "^3.0.1",
+    "file-loader": "^4.2.0",
     "front-matter": "^3.0.2",
     "fs-extra": "^8.0.1",
     "globby": "^9.2.0",
@@ -86,7 +86,9 @@
     "sharp": "^0.22.1",
     "string-replace-loader": "^2.1.1",
     "style-loader": "^0.23.1",
-    "svgo": "^1.2.2",
+    "svg-sprite-loader": "^4.1.6",
+    "svgo": "^1.3.0",
+    "svgo-loader": "^2.2.1",
     "ts-loader": "^6.0.2",
     "typescript": "^3.5.1",
     "uglifyjs-webpack-plugin": "^2.1.3",
@@ -114,4 +116,4 @@
     }
   ],
   "schema": "utils/config.schema.yml"
-}
+}