Use a custom svgo plugin to optimize svg attributes (#1148)

* Use custom svgo plugin to optimize svg attrs

* Remove `finalNewline` since it doesn't seem to have any effect

* Minor tweaks

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

1 files changed, 41 insertions, 1 deletions

diff --git a/svgo.config.js b/svgo.config.js
index 62bf8f654..19c41a86d 100644
--- a/svgo.config.js
+++ b/svgo.config.js
@@ -1,10 +1,13 @@
 'use strict'
 
+const path = require('path')
+
 module.exports = {
   multipass: true,
   js2svg: {
     pretty: true,
-    indent: 2
+    indent: 2,
+    eol: 'lf'
   },
   plugins: [
     {
@@ -31,6 +34,43 @@ module.exports = {
           'fill'
         ]
       }
+    },
+    // Custom plugin which resets the SVG attributes to explicit values
+    {
+      name: 'explicitAttrs',
+      type: 'visitor',
+      params: {
+        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' ? `bi bi-${basename}` : value
+                }
+              }
+            }
+          }
+        }
+      }
     }
   ]
 }