@dossierhq/design
Version:
The design system for Dossier.
59 lines • 1.55 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { toClassName } from '../../utils/ClassNameUtils.js';
// Also update ./scripts/generate-icons.cjs
export const ICON_NAMES = [
'add',
'bold',
'chevronDown',
'chevronUp',
'close',
'code',
'delete',
'download',
'first',
'grip',
'heading',
'italic',
'last',
'link',
'linkFrom',
'linkTo',
'list',
'listCheck',
'listOl',
'listUl',
'location',
'map',
'next',
'openInNewWindow',
'orderAsc',
'orderDesc',
'ordered',
'paragraph',
'previous',
'search',
'shuffle',
'strikethrough',
'subscript',
'superscript',
'underline',
'upload',
'user',
];
const containerSize = {
small: 'is-small',
medium: 'is-medium',
large: 'is-large',
};
const assetSize = { small: 'icon-asset-s', medium: 'icon-asset-m', large: 'icon-asset-l' };
export function Icon({ className, style, icon, text, size }) {
const bulmaIcon = (_jsx("span", { className: toClassName('icon', size && containerSize[size], !text && className), style: text ? undefined : style, children: _jsx(IconAsset, { icon: icon, size: size }) }));
if (text) {
return (_jsx("span", { className: toClassName(className, 'icon-text'), style: style, children: bulmaIcon }));
}
return bulmaIcon;
}
export function IconAsset({ icon, size, }) {
return _jsx("span", { className: toClassName(`icon-asset icon-${icon}`, size && assetSize[size]) });
}
//# sourceMappingURL=Icon.js.map