vira
Version:
A simple and highly versatile design system using element-vir.
38 lines (37 loc) • 1.1 kB
JavaScript
import { getObjectTypedKeys } from '@augment-vir/common';
import { html } from 'element-vir';
import { getAssertedValidColor } from '../styles/color.js';
import { viraIconCssVars } from './icon-css-vars.js';
/**
* A function used to define an individual Vira icon SVG.
*
* @category Icon
*/
export function defineIcon({ name, svgTemplate, }) {
const iconSvg = {
name,
svgTemplate,
};
return iconSvg;
}
/**
* Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
* the original icon can be used.
*
* @category Icon
*/
export function createColoredIcon(icon, colors) {
const colorStyles = getObjectTypedKeys(colors)
.map((cssVarName) => {
const colorValue = colors[cssVarName];
const color = getAssertedValidColor(colorValue);
return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
})
.join(' ');
return defineIcon({
name: icon.name,
svgTemplate: html `
<div style=${colorStyles}>${icon.svgTemplate}</div>
`,
});
}