Vite plugin to add svg as inline data (#1072)

* add vite plugin to add svg as inline data

* Add node types package

package-lock.json

@@ -41,6 +41,7 @@
       },
       "devDependencies": {
         "@rollup/plugin-wasm": "6.1.1",
+        "@types/node": "18.11.18",
         "@types/react": "18.0.26",
         "@types/react-dom": "18.0.9",
         "@typescript-eslint/eslint-plugin": "5.46.1",
@@ -53,6 +54,7 @@
         "eslint-plugin-jsx-a11y": "6.6.1",
         "eslint-plugin-react": "7.31.11",
         "eslint-plugin-react-hooks": "4.6.0",
+        "mini-svg-data-uri": "1.4.4",
         "prettier": "2.8.1",
         "sass": "1.56.2",
         "typescript": "4.9.4",
@@ -1054,6 +1056,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "18.11.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -3768,6 +3776,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",

package.json

@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-wasm": "6.1.1",
+    "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@typescript-eslint/eslint-plugin": "5.46.1",
@@ -63,6 +64,7 @@
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
+    "mini-svg-data-uri": "1.4.4",
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",

src/app/atoms/system-icons/RawIcon.jsx

@@ -2,20 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RawIcon.scss';
 
-function RawIcon({
-  color, size, src, isImage,
-}) {
+function RawIcon({ color, size, src, isImage }) {
   const style = {};
   if (color !== null) style.backgroundColor = color;
   if (isImage) {
     style.backgroundColor = 'transparent';
-    style.backgroundImage = `url(${src})`;
+    style.backgroundImage = `url("${src}")`;
   } else {
-    style.WebkitMaskImage = `url(${src})`;
-    style.maskImage = `url(${src})`;
+    style.WebkitMaskImage = `url("${src}")`;
+    style.maskImage = `url("${src}")`;
   }
 
-  return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
+  return <span className={`ic-raw ic-raw-${size}`} style={style} />;
 }
 
 RawIcon.defaultProps = {

vite.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { wasm } from '@rollup/plugin-wasm';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
+import { svgLoader } from './viteSvgLoader';
 
 const copyFiles = {
   targets: [
@@ -33,6 +34,7 @@ export default defineConfig({
   },
   plugins: [
     viteStaticCopy(copyFiles),
+    svgLoader(),
     wasm(),
     react(),
   ],

viteSvgLoader.ts

@@ -0,0 +1,16 @@
+import svgToMiniDataURI from 'mini-svg-data-uri';
+import type { Plugin } from 'rollup';
+import fs from 'fs';
+
+// TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
+export const svgLoader = (): Plugin => ({
+  name: 'vite-svg-patch-plugin',
+  transform: (code, id) => {
+    if (id.endsWith('.svg')) {
+      const extractedSvg = fs.readFileSync(id, 'utf8');
+      const datauri = svgToMiniDataURI.toSrcset(extractedSvg);
+      return `export default "${datauri}"`;
+    }
+    return code;
+  },
+});