@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
57 lines (54 loc) • 1.98 kB
JavaScript
import React from 'react';
import cx from 'classnames';
import { icons, theme } from '../../tokens/index.js';
import * as index from '../../icons/index.js';
import capitalize from '../utils/capitalize.js';
import eqSet from '../utils/eqSet.js';
import 'lodash.throttle';
if (!eqSet(new Set(Object.keys(index)), new Set(Object.keys(icons.icons))))
throw new Error("Icon sources and tokens are not consistent. Did you add the source, export it and run 'pnpm run icons:update'");
const BUNDLED_ICONS = Object.freeze(Object.keys(icons.icons).reduce((bundledIcons, name) => ({
...bundledIcons,
[name]: index[name],
}), {}));
const iconLegacyColorsOptions = [
"amber",
"blue",
"coral",
"graphite",
"graphiteLight",
"green",
"greenDark",
"greenLight",
"grey",
"greyDark",
"greyLight",
"greyLighter",
"indigo",
"indigoDark",
"purple",
"purpleLight",
"red",
"turquoise",
"white",
];
const iconColors = [
...Object.keys(theme.icon),
...iconLegacyColorsOptions,
];
const isIconSource = (source) => Object.keys(icons.icons).includes(source);
const Icon = ({ source, color, size = 24, contained = false, className, }) => {
const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${source}`, {
[`cobalt-Icon--color${capitalize(color)}`]: color,
"cobalt-Icon--size16": size === 16,
"cobalt-Icon--size20": size === 20,
"cobalt-Icon--size32": size === 32,
"cobalt-Icon--contained": contained,
});
const iconSource = BUNDLED_ICONS[source];
if (iconSource == null)
throw new Error(`Icon '${source}' can not be found. Did you add the source, export it and run 'pnpm run icons:update'?`);
return (React.createElement("span", { className: computedClassName, dangerouslySetInnerHTML: { __html: iconSource } }));
};
export { BUNDLED_ICONS, Icon, Icon as default, iconColors, isIconSource };
//# sourceMappingURL=index.js.map