phanpy/src/components/icon.jsx

60 wiersze
1.6 KiB
JavaScript

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',
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',
home: 'mingcute:home-5-line',
notification: 'mingcute:notification-line',
follow: 'mingcute:user-follow-line',
'follow-add': 'mingcute:user-add-line',
poll: 'mingcute:chart-bar-line',
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',
};
export default ({ icon, size = 'm', alt, title, class: className = '' }) => {
const iconSize = SIZES[size];
const iconName = ICONS[icon];
return (
<div
class={`icon ${className}`}
title={title || alt}
style={{
width: `${iconSize}px`,
height: `${iconSize}px`,
display: 'inline-block',
overflow: 'hidden',
lineHeight: 0,
}}
>
<iconify-icon width={iconSize} height={iconSize} icon={iconName}>
{alt}
</iconify-icon>
</div>
);
};