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.
This commit is contained in:
Lim Chee Aun 2023-01-11 09:47:46 +08:00
parent affc977f42
commit d6c0f83c15
4 changed files with 61 additions and 31 deletions

37
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -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
width={iconSize}
height={iconSize}
icon={iconName}
rotate={rotate}
flip={flip}
>
{alt}
</iconify-icon>
{iconData && (
<svg
width={iconSize}
height={iconSize}
viewBox={`0 0 ${iconData.width} ${iconData.height}`}
dangerouslySetInnerHTML={{ __html: iconData.body }}
style={{
transform: `${rotate ? `rotate(${rotate})` : ''} ${
flip ? `scaleX(-1)` : ''
}`,
}}
/>
)}
</div>
);
}

View file

@ -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);