phanpy/src/components/icon.jsx

120 lines
3.4 KiB
React
Raw Normal View History

import { useEffect, useState } from 'preact/hooks';
2022-12-10 12:14:48 +03:00
const SIZES = {
s: 12,
m: 16,
l: 20,
xl: 24,
xxl: 32,
};
const ICONS = {
x: 'mingcute:close-line',
heart: 'mingcute:heart-line',
bookmark: 'mingcute:bookmark-line',
'check-circle': 'mingcute:check-circle-line',
transfer: 'mingcute:transfer-4-line',
rocket: 'mingcute:rocket-line',
'arrow-left': 'mingcute:arrow-left-line',
'arrow-right': 'mingcute:arrow-right-line',
'arrow-up': 'mingcute:arrow-up-line',
2022-12-29 06:47:10 +03:00
'arrow-down': 'mingcute:arrow-down-line',
2022-12-10 12:14:48 +03:00
earth: 'mingcute:earth-line',
lock: 'mingcute:lock-line',
unlock: 'mingcute:unlock-line',
'eye-close': 'mingcute:eye-close-line',
'eye-open': 'mingcute:eye-2-line',
message: 'mingcute:mail-line',
comment: 'mingcute:chat-3-line',
2023-02-08 17:56:30 +03:00
home: 'mingcute:home-3-line',
2022-12-10 12:14:48 +03:00
notification: 'mingcute:notification-line',
follow: 'mingcute:user-follow-line',
'follow-add': 'mingcute:user-add-line',
poll: ['mingcute:chart-bar-line', '90deg'],
2022-12-10 12:14:48 +03:00
pencil: 'mingcute:pencil-line',
quill: 'mingcute:quill-pen-line',
at: 'mingcute:at-line',
attachment: 'mingcute:attachment-line',
upload: 'mingcute:upload-3-line',
gear: 'mingcute:settings-3-line',
2023-02-25 05:03:52 +03:00
more: 'mingcute:more-3-line',
external: 'mingcute:external-link-line',
popout: 'mingcute:external-link-line',
popin: ['mingcute:external-link-line', '180deg'],
2022-12-14 16:48:17 +03:00
plus: 'mingcute:add-circle-line',
2022-12-18 15:53:32 +03:00
'chevron-left': 'mingcute:left-line',
2023-01-14 14:42:04 +03:00
'chevron-right': 'mingcute:right-line',
reply: ['mingcute:share-forward-line', '180deg', 'horizontal'],
thread: 'mingcute:route-line',
group: 'mingcute:group-line',
bot: 'mingcute:android-2-line',
menu: 'mingcute:rows-4-line',
2023-02-10 19:05:18 +03:00
list: 'mingcute:list-check-line',
search: 'mingcute:search-2-line',
2023-02-11 11:48:47 +03:00
hashtag: 'mingcute:hashtag-line',
info: 'mingcute:information-line',
2023-02-16 12:51:54 +03:00
shortcut: 'mingcute:lightning-line',
user: 'mingcute:user-4-line',
following: 'mingcute:walk-line',
2023-02-17 05:12:59 +03:00
pin: 'mingcute:pin-line',
bus: 'mingcute:bus-2-line',
link: 'mingcute:link-2-line',
history: 'mingcute:history-line',
share: 'mingcute:share-2-line',
2023-02-28 10:27:42 +03:00
sparkles: 'mingcute:sparkles-line',
2023-02-28 12:12:17 +03:00
exit: 'mingcute:exit-line',
translate: 'mingcute:translate-line',
2022-12-10 12:14:48 +03:00
};
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
2022-12-16 08:27:04 +03:00
function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
2022-12-14 16:48:17 +03:00
if (!icon) return null;
2022-12-10 12:14:48 +03:00
const iconSize = SIZES[size];
let iconName = ICONS[icon];
let rotate, flip;
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]);
2022-12-10 12:14:48 +03:00
return (
<div
class={`icon ${className}`}
title={title || alt}
style={{
width: `${iconSize}px`,
height: `${iconSize}px`,
display: 'inline-block',
overflow: 'hidden',
lineHeight: 0,
}}
>
{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)` : ''
}`,
}}
/>
)}
2022-12-10 12:14:48 +03:00
</div>
);
2022-12-16 08:27:04 +03:00
}
export default Icon;