diff --git a/package-lock.json b/package-lock.json index 0c34ee1f..1810f9d9 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b249a17f..54b4ffb9 100644 --- a/package.json +++ b/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", diff --git a/src/components/icon.jsx b/src/components/icon.jsx index d9ab5008..d2e4e547 100644 --- a/src/components/icon.jsx +++ b/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 (
- - {alt} - + {iconData && ( + + )}
); } diff --git a/src/main.jsx b/src/main.jsx index ad1d5cb9..e4a4d9fd 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -9,3 +9,20 @@ if (import.meta.env.DEV) { } render(, 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);