From b263220fbedbc12c6728ecb128e454ce4bbd68b7 Mon Sep 17 00:00:00 2001
From: ajbura <ajbura@gmail.com>
Date: Fri, 13 Jan 2023 15:38:04 +0530
Subject: [PATCH] add vite plugin to add svg as inline data

---
 package-lock.json                      | 10 ++++++++++
 package.json                           |  1 +
 src/app/atoms/system-icons/RawIcon.jsx | 12 +++++-------
 vite.config.js                         |  2 ++
 viteSvgLoader.ts                       | 16 ++++++++++++++++
 5 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 viteSvgLoader.ts

diff --git a/package-lock.json b/package-lock.json
index b60abb5c..164911b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,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",
@@ -3768,6 +3769,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",
diff --git a/package.json b/package.json
index 5ba7933d..05163af6 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,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",
diff --git a/src/app/atoms/system-icons/RawIcon.jsx b/src/app/atoms/system-icons/RawIcon.jsx
index 08acc66b..a6697f4f 100644
--- a/src/app/atoms/system-icons/RawIcon.jsx
+++ b/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 = {
diff --git a/vite.config.js b/vite.config.js
index b46913be..7ca1baff 100644
--- a/vite.config.js
+++ b/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(),
   ],
diff --git a/viteSvgLoader.ts b/viteSvgLoader.ts
new file mode 100644
index 00000000..a119e3ed
--- /dev/null
+++ b/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;
+  },
+});