chore: update dependencies and config (#31)

- update dependencies in package.json
- fork svgo config from bootstrap

package.json

@@ -27,23 +27,23 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "autoprefixer": "^10.3.2",
+    "autoprefixer": "^10.4.12",
     "chalk": "^4.1.2",
     "cheerio": "^1.0.0-rc.10",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "fantasticon": "^1.2.2",
-    "find-unused-sass-variables": "^3.1.0",
-    "hugo-bin": "^0.75.0",
+    "eslint": "^8.31.0",
+    "fantasticon": "^1.2.3",
+    "find-unused-sass-variables": "^4.0.5",
+    "hugo-bin": "^0.97.0",
     "linkinator": "^2.14.0",
-    "lockfile-lint": "^4.6.2",
+    "lockfile-lint": "^4.10.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
+    "postcss": "^8.4.20",
+    "postcss-cli": "^10.1.0",
     "purgecss": "^4.0.3",
-    "stylelint": "^13.13.1",
-    "svg-sprite": "^1.5.2",
-    "svgo": "^2.3.1",
+    "stylelint": "^14.16.1",
+    "svg-sprite": "^3.0.0-alpha1",
+    "svgo": "^2.8.0",
     "vnu-jar": "21.6.11"
   },
   "engines": {

svgo.config.js

@@ -1,39 +1,74 @@
-'use strict'
-
-const { extendDefaultPlugins } = require('svgo')
+const path = require('path')
 
 module.exports = {
   multipass: true,
   js2svg: {
     pretty: true,
-    indent: 2
+    indent: 2,
+    eol: 'lf'
   },
-  plugins: extendDefaultPlugins([
+  plugins: [
     {
-      name: 'cleanupListOfValues'
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeUnknownsAndDefaults: {
+            keepRoleAttr: true
+          },
+          removeViewBox: false
+        }
+      }
     },
+    // The next plugins are included in svgo but are not part of preset-default,
+    // so we need to enable them separately
+    'cleanupListOfValues',
+    'sortAttrs',
     {
       name: 'removeAttrs',
       params: {
         attrs: [
+          'clip-rule',
           'data-name',
-          'fill',
-          'clip-rule'
+          'fill'
         ]
       }
     },
+    // Custom plugin which resets the SVG attributes to explicit values
     {
-      name: 'removeUnknownsAndDefaults',
+      name: 'explicitAttrs',
+      type: 'visitor',
       params: {
-        keepRoleAttr: true
+        attributes: {
+          xmlns: 'http://www.w3.org/2000/svg',
+          width: '16',
+          height: '16',
+          fill: 'currentColor',
+          class: '', // We replace the class with the correct one based on filename later
+          viewBox: '0 0 16 16'
+        }
+      },
+      fn(_root, params, info) {
+        if (!params.attributes) {
+          return null
+        }
+
+        const basename = path.basename(info.path, '.svg')
+
+        return {
+          element: {
+            enter(node, parentNode) {
+              if (node.name === 'svg' && parentNode.type === 'root') {
+                // We set the `svgAttributes` in the order we want to,
+                // hence why we remove the attributes and add them back
+                node.attributes = {}
+                for (const [key, value] of Object.entries(params.attributes)) {
+                  node.attributes[key] = key === 'class' ? `qi qi-${basename}` : value
+                }
+              }
+            }
+          }
+        }
       }
-    },
-    {
-      name: 'removeViewBox',
-      active: false
-    },
-    {
-      name: 'sortAttrs'
     }
-  ])
+  ]
 }