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 (