mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-03-26 19:29:25 +03:00
Replace import.meta.glob, it actually generates imports for *all* icons
Change to manually import icons
This commit is contained in:
Lim Chee Aun
parent
0c86416489
commit
e26473f607
1 changed files with 83 additions and 81 deletions
|
|
@ -9,81 +9,86 @@ const SIZES = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const ICONS = {
|
const ICONS = {
|
||||||
x: 'mingcute:close-line',
|
x: () => import('@iconify-icons/mingcute/close-line'),
|
||||||
heart: 'mingcute:heart-line',
|
heart: () => import('@iconify-icons/mingcute/heart-line'),
|
||||||
bookmark: 'mingcute:bookmark-line',
|
bookmark: () => import('@iconify-icons/mingcute/bookmark-line'),
|
||||||
'check-circle': 'mingcute:check-circle-line',
|
'check-circle': () => import('@iconify-icons/mingcute/check-circle-line'),
|
||||||
transfer: 'mingcute:transfer-4-line',
|
transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
|
||||||
rocket: 'mingcute:rocket-line',
|
rocket: () => import('@iconify-icons/mingcute/rocket-line'),
|
||||||
'arrow-left': 'mingcute:arrow-left-line',
|
'arrow-left': () => import('@iconify-icons/mingcute/arrow-left-line'),
|
||||||
'arrow-right': 'mingcute:arrow-right-line',
|
'arrow-right': () => import('@iconify-icons/mingcute/arrow-right-line'),
|
||||||
'arrow-up': 'mingcute:arrow-up-line',
|
'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
|
||||||
'arrow-down': 'mingcute:arrow-down-line',
|
'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
|
||||||
earth: 'mingcute:earth-line',
|
earth: () => import('@iconify-icons/mingcute/earth-line'),
|
||||||
lock: 'mingcute:lock-line',
|
lock: () => import('@iconify-icons/mingcute/lock-line'),
|
||||||
unlock: 'mingcute:unlock-line',
|
unlock: () => import('@iconify-icons/mingcute/unlock-line'),
|
||||||
'eye-close': 'mingcute:eye-close-line',
|
'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
|
||||||
'eye-open': 'mingcute:eye-2-line',
|
'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
|
||||||
message: 'mingcute:mail-line',
|
message: () => import('@iconify-icons/mingcute/mail-line'),
|
||||||
comment: 'mingcute:chat-3-line',
|
comment: () => import('@iconify-icons/mingcute/chat-3-line'),
|
||||||
home: 'mingcute:home-3-line',
|
home: () => import('@iconify-icons/mingcute/home-3-line'),
|
||||||
notification: 'mingcute:notification-line',
|
notification: () => import('@iconify-icons/mingcute/notification-line'),
|
||||||
follow: 'mingcute:user-follow-line',
|
follow: () => import('@iconify-icons/mingcute/user-follow-line'),
|
||||||
'follow-add': 'mingcute:user-add-line',
|
'follow-add': () => import('@iconify-icons/mingcute/user-add-line'),
|
||||||
poll: ['mingcute:chart-bar-line', '90deg'],
|
poll: [() => import('@iconify-icons/mingcute/chart-bar-line'), '90deg'],
|
||||||
pencil: 'mingcute:pencil-line',
|
pencil: () => import('@iconify-icons/mingcute/pencil-line'),
|
||||||
quill: 'mingcute:quill-pen-line',
|
quill: () => import('@iconify-icons/mingcute/quill-pen-line'),
|
||||||
at: 'mingcute:at-line',
|
at: () => import('@iconify-icons/mingcute/at-line'),
|
||||||
attachment: 'mingcute:attachment-line',
|
attachment: () => import('@iconify-icons/mingcute/attachment-line'),
|
||||||
upload: 'mingcute:upload-3-line',
|
upload: () => import('@iconify-icons/mingcute/upload-3-line'),
|
||||||
gear: 'mingcute:settings-3-line',
|
gear: () => import('@iconify-icons/mingcute/settings-3-line'),
|
||||||
more: 'mingcute:more-3-line',
|
more: () => import('@iconify-icons/mingcute/more-3-line'),
|
||||||
external: 'mingcute:external-link-line',
|
external: () => import('@iconify-icons/mingcute/external-link-line'),
|
||||||
popout: 'mingcute:external-link-line',
|
popout: () => import('@iconify-icons/mingcute/external-link-line'),
|
||||||
popin: ['mingcute:external-link-line', '180deg'],
|
popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
|
||||||
plus: 'mingcute:add-circle-line',
|
plus: () => import('@iconify-icons/mingcute/add-circle-line'),
|
||||||
'chevron-left': 'mingcute:left-line',
|
'chevron-left': () => import('@iconify-icons/mingcute/left-line'),
|
||||||
'chevron-right': 'mingcute:right-line',
|
'chevron-right': () => import('@iconify-icons/mingcute/right-line'),
|
||||||
reply: ['mingcute:share-forward-line', '180deg', 'horizontal'],
|
reply: [
|
||||||
thread: 'mingcute:route-line',
|
() => import('@iconify-icons/mingcute/share-forward-line'),
|
||||||
group: 'mingcute:group-line',
|
'180deg',
|
||||||
bot: 'mingcute:android-2-line',
|
'horizontal',
|
||||||
menu: 'mingcute:rows-4-line',
|
],
|
||||||
list: 'mingcute:list-check-line',
|
thread: () => import('@iconify-icons/mingcute/route-line'),
|
||||||
search: 'mingcute:search-2-line',
|
group: () => import('@iconify-icons/mingcute/group-line'),
|
||||||
hashtag: 'mingcute:hashtag-line',
|
bot: () => import('@iconify-icons/mingcute/android-2-line'),
|
||||||
info: 'mingcute:information-line',
|
menu: () => import('@iconify-icons/mingcute/rows-4-line'),
|
||||||
shortcut: 'mingcute:lightning-line',
|
list: () => import('@iconify-icons/mingcute/list-check-line'),
|
||||||
user: 'mingcute:user-4-line',
|
search: () => import('@iconify-icons/mingcute/search-2-line'),
|
||||||
following: 'mingcute:walk-line',
|
hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
|
||||||
pin: 'mingcute:pin-line',
|
info: () => import('@iconify-icons/mingcute/information-line'),
|
||||||
bus: 'mingcute:bus-2-line',
|
shortcut: () => import('@iconify-icons/mingcute/lightning-line'),
|
||||||
link: 'mingcute:link-2-line',
|
user: () => import('@iconify-icons/mingcute/user-4-line'),
|
||||||
history: 'mingcute:history-line',
|
following: () => import('@iconify-icons/mingcute/walk-line'),
|
||||||
share: 'mingcute:share-2-line',
|
pin: () => import('@iconify-icons/mingcute/pin-line'),
|
||||||
sparkles: 'mingcute:sparkles-line',
|
bus: () => import('@iconify-icons/mingcute/bus-2-line'),
|
||||||
exit: 'mingcute:exit-line',
|
link: () => import('@iconify-icons/mingcute/link-2-line'),
|
||||||
translate: 'mingcute:translate-line',
|
history: () => import('@iconify-icons/mingcute/history-line'),
|
||||||
play: 'mingcute:play-fill',
|
share: () => import('@iconify-icons/mingcute/share-2-line'),
|
||||||
trash: 'mingcute:delete-2-line',
|
sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
|
||||||
mute: 'mingcute:volume-mute-line',
|
exit: () => import('@iconify-icons/mingcute/exit-line'),
|
||||||
unmute: 'mingcute:volume-line',
|
translate: () => import('@iconify-icons/mingcute/translate-line'),
|
||||||
block: 'mingcute:forbid-circle-line',
|
play: () => import('@iconify-icons/mingcute/play-fill'),
|
||||||
unblock: ['mingcute:forbid-circle-line', '180deg'],
|
trash: () => import('@iconify-icons/mingcute/delete-2-line'),
|
||||||
flag: 'mingcute:flag-4-line',
|
mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
|
||||||
time: 'mingcute:time-line',
|
unmute: () => import('@iconify-icons/mingcute/volume-line'),
|
||||||
refresh: 'mingcute:refresh-2-line',
|
block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
|
||||||
emoji2: 'mingcute:emoji-2-line',
|
unblock: [
|
||||||
filter: 'mingcute:filter-2-line',
|
() => import('@iconify-icons/mingcute/forbid-circle-line'),
|
||||||
chart: 'mingcute:chart-line-line',
|
'180deg',
|
||||||
react: 'mingcute:react-line',
|
],
|
||||||
layout4: 'mingcute:layout-4-line',
|
flag: () => import('@iconify-icons/mingcute/flag-4-line'),
|
||||||
layout5: 'mingcute:layout-5-line',
|
time: () => import('@iconify-icons/mingcute/time-line'),
|
||||||
announce: 'mingcute:announcement-line',
|
refresh: () => import('@iconify-icons/mingcute/refresh-2-line'),
|
||||||
|
emoji2: () => import('@iconify-icons/mingcute/emoji-2-line'),
|
||||||
|
filter: () => import('@iconify-icons/mingcute/filter-2-line'),
|
||||||
|
chart: () => import('@iconify-icons/mingcute/chart-line-line'),
|
||||||
|
react: () => import('@iconify-icons/mingcute/react-line'),
|
||||||
|
layout4: () => import('@iconify-icons/mingcute/layout-4-line'),
|
||||||
|
layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
|
||||||
|
announce: () => import('@iconify-icons/mingcute/announcement-line'),
|
||||||
};
|
};
|
||||||
|
|
||||||
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
|
|
||||||
|
|
||||||
function Icon({
|
function Icon({
|
||||||
icon,
|
icon,
|
||||||
size = 'm',
|
size = 'm',
|
||||||
|
|
@ -95,20 +100,17 @@ function Icon({
|
||||||
if (!icon) return null;
|
if (!icon) return null;
|
||||||
|
|
||||||
const iconSize = SIZES[size];
|
const iconSize = SIZES[size];
|
||||||
let iconName = ICONS[icon];
|
let iconBlock = ICONS[icon];
|
||||||
let rotate, flip;
|
let rotate, flip;
|
||||||
if (Array.isArray(iconName)) {
|
if (Array.isArray(iconBlock)) {
|
||||||
[iconName, rotate, flip] = iconName;
|
[iconBlock, rotate, flip] = iconBlock;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [iconData, setIconData] = useState(null);
|
const [iconData, setIconData] = useState(null);
|
||||||
useEffect(async () => {
|
useEffect(async () => {
|
||||||
const name = iconName.replace('mingcute:', '');
|
const icon = await iconBlock();
|
||||||
const icon = await modules[
|
|
||||||
`/node_modules/@iconify-icons/mingcute/${name}.js`
|
|
||||||
]();
|
|
||||||
setIconData(icon.default);
|
setIconData(icon.default);
|
||||||
}, [iconName]);
|
}, [iconBlock]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue