Remove iconify-icon web component, bundle all icons

The whole iconify thing is about 20KB (8KB min-gzip), it's too huge just for icons.

Instead of getting icons from the API/CDN, bundle them all in.

package-lock.json

@@ -9,11 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "@github/text-expander-element": "~2.3.0",
+        "@iconify-icons/mingcute": "~1.2.3",
         "dayjs": "~1.11.7",
         "dayjs-twitter": "~0.5.0",
         "fast-blurhash": "~1.1.2",
         "history": "~5.3.0",
-        "iconify-icon": "~1.0.2",
         "just-debounce-it": "~3.2.0",
         "masto": "~5.2.0",
         "mem": "~9.0.2",
@@ -2071,6 +2071,14 @@
         "@github/combobox-nav": "^2.0.2"
       }
     },
+    "node_modules/@iconify-icons/mingcute": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.3.tgz",
+      "integrity": "sha512-yZyioZhNy61SkLxQoyHThsfuyaOej9n84PUS+K69qaS1Dyj7/wHwYhWXseFCnzyzicaEHkCpt6H/hYV8fwmMLg==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
@@ -3602,17 +3610,6 @@
         "@babel/runtime": "^7.7.6"
       }
     },
-    "node_modules/iconify-icon": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-1.0.2.tgz",
-      "integrity": "sha512-mehAvz2a4eUAlPo76Wul4zzsPNr3hbOHiauMhPrTVIdLOt0AnccnNloh1EeTO3tYeBv7iaJZfdCPHczvi+CkXQ==",
-      "dependencies": {
-        "@iconify/types": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/cyberalien"
-      }
-    },
     "node_modules/idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
@@ -7185,6 +7182,14 @@
         "@github/combobox-nav": "^2.0.2"
       }
     },
+    "@iconify-icons/mingcute": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.3.tgz",
+      "integrity": "sha512-yZyioZhNy61SkLxQoyHThsfuyaOej9n84PUS+K69qaS1Dyj7/wHwYhWXseFCnzyzicaEHkCpt6H/hYV8fwmMLg==",
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
@@ -8375,14 +8380,6 @@
         "@babel/runtime": "^7.7.6"
       }
     },
-    "iconify-icon": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-1.0.2.tgz",
-      "integrity": "sha512-mehAvz2a4eUAlPo76Wul4zzsPNr3hbOHiauMhPrTVIdLOt0AnccnNloh1EeTO3tYeBv7iaJZfdCPHczvi+CkXQ==",
-      "requires": {
-        "@iconify/types": "^2.0.0"
-      }
-    },
     "idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",

package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@github/text-expander-element": "~2.3.0",
+    "@iconify-icons/mingcute": "~1.2.3",
     "dayjs": "~1.11.7",
     "dayjs-twitter": "~0.5.0",
     "fast-blurhash": "~1.1.2",
     "history": "~5.3.0",
-    "iconify-icon": "~1.0.2",
     "just-debounce-it": "~3.2.0",
     "masto": "~5.2.0",
     "mem": "~9.0.2",

src/components/icon.jsx

@@ -1,4 +1,4 @@
-import 'iconify-icon';
+import { useEffect, useState } from 'preact/hooks';
 
 const SIZES = {
   s: 12,
@@ -49,6 +49,8 @@ const ICONS = {
   bot: 'mingcute:android-2-line',
 };
 
+const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
+
 function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
   if (!icon) return null;
 
@@ -58,6 +60,16 @@ function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
   if (Array.isArray(iconName)) {
     [iconName, rotate, flip] = iconName;
   }
+
+  const [iconData, setIconData] = useState(null);
+  useEffect(async () => {
+    const name = iconName.replace('mingcute:', '');
+    const icon = await modules[
+      `/node_modules/@iconify-icons/mingcute/${name}.js`
+    ]();
+    setIconData(icon.default);
+  }, [iconName]);
+
   return (
     <div
       class={`icon ${className}`}
@@ -70,15 +82,19 @@ function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
         lineHeight: 0,
       }}
     >
-      <iconify-icon
+      {iconData && (
-        width={iconSize}
+        <svg
-        height={iconSize}
+          width={iconSize}
-        icon={iconName}
+          height={iconSize}
-        rotate={rotate}
+          viewBox={`0 0 ${iconData.width} ${iconData.height}`}
-        flip={flip}
+          dangerouslySetInnerHTML={{ __html: iconData.body }}
-      >
+          style={{
-        {alt}
+            transform: `${rotate ? `rotate(${rotate})` : ''} ${
-      </iconify-icon>
+              flip ? `scaleX(-1)` : ''
+            }`,
+          }}
+        />
+      )}
     </div>
   );
 }

src/main.jsx

@@ -9,3 +9,20 @@ if (import.meta.env.DEV) {
 }
 
 render(<App />, document.getElementById('app'));
+
+// Clean up iconify localStorage
+// TODO: Remove this after few weeks?
+setTimeout(() => {
+  try {
+    Object.keys(localStorage).forEach((key) => {
+      if (key.startsWith('iconify')) {
+        localStorage.removeItem(key);
+      }
+    });
+    Object.keys(sessionStorage).forEach((key) => {
+      if (key.startsWith('iconify')) {
+        sessionStorage.removeItem(key);
+      }
+    });
+  } catch (e) {}
+}, 5000);