@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
63 lines • 2.44 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
import { paletteMainColors } from '../../services/palette-css-vars.js';
const SIZE_MAP = {
small: 16,
medium: 24,
large: 32,
};
export const Icon = Shade({
customElementName: 'shade-icon',
css: {
display: 'inline-flex',
fontFamily: cssVariableTheme.typography.fontFamily,
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'middle',
lineHeight: '1',
flexShrink: '0',
color: 'var(--icon-color, currentColor)',
'& svg': {
display: 'block',
},
'&[data-size="small"]': {
width: '16px',
height: '16px',
},
'&[data-size="medium"]': {
width: '24px',
height: '24px',
},
'&[data-size="large"]': {
width: '32px',
height: '32px',
},
},
render: ({ props, useHostProps }) => {
const { icon, size = 'medium', color, ariaLabel, style } = props;
const sizeName = typeof size === 'string' ? size : undefined;
const sizePx = typeof size === 'number' ? size : SIZE_MAP[size];
const hostStyle = {};
if (!sizeName) {
hostStyle.width = `${sizePx}px`;
hostStyle.height = `${sizePx}px`;
}
if (color) {
hostStyle['--icon-color'] = paletteMainColors[color].main;
}
if (style) {
Object.assign(hostStyle, style);
}
useHostProps({
'data-size': sizeName || undefined,
role: 'img',
'aria-label': ariaLabel || undefined,
'aria-hidden': ariaLabel ? undefined : 'true',
style: hostStyle,
});
const viewBox = icon.viewBox ?? '0 0 24 24';
const isStroke = (icon.style ?? 'stroke') === 'stroke';
return (createComponent("svg", { width: sizePx, height: sizePx, viewBox: viewBox, fill: isStroke ? 'none' : 'currentColor', stroke: isStroke ? 'currentColor' : 'none', "stroke-width": isStroke ? (icon.strokeWidth ?? 2) : undefined, "stroke-linecap": isStroke ? 'round' : undefined, "stroke-linejoin": isStroke ? 'round' : undefined }, icon.paths.map((p) => (createComponent("path", { d: p.d, "fill-rule": p.fillRule })))));
},
});
//# sourceMappingURL=icon.js.map