@workday/canvas-kit-react/dist/es6/icon/lib/ExpressiveIcon.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { CanvasIconTypes } from '@workday/canvas-expressive-icons-web';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
import { component } from '@workday/canvas-tokens-web';
import { Svg, resolveSize, svgStencil } from './Svg';
export const expressiveIconStencil = createStencil({
    extends: svgStencil,
    vars: {
        /**
         * This will set the icon's outline color for the `.wd-expressive-fill` SVG layer.
         */
        color: '',
        /**
         * This will set the icon's accent color for the `.wd-expressive-accent` SVG layer.
         */
        accentColor: '',
    },
    base: { name: "1oz2po", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-accent, oklch(0.0847 0 0 / 0.17)));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
}, "expressive-icon-3a9572");
export const ExpressiveIcon = createComponent('span')({
    displayName: 'ExpressiveIcon',
    Component: ({ accent, color, icon, size, ...elemProps }, ref, Element) => {
        return (_jsx(Svg, { as: Element, src: icon, type: CanvasIconTypes.Expressive, ref: ref, ...handleCsProp(elemProps, expressiveIconStencil({
                size: resolveSize(size, component.legacy.expressiveIcon.size),
                color,
                accentColor: accent,
            })) }));
    },
});