UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

53 lines (52 loc) 2.11 kB
import { jsx as _jsx } from "react/jsx-runtime"; import { createComponent } from '@workday/canvas-kit-react/common'; import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling'; export const svgStencil = createStencil({ vars: { /** sets width of svg element * @deprecated use size instead or svg selector */ width: '', /** sets height of svg element * @deprecated use size instead or svg selector */ height: '', /** sets width and height of svg element */ size: '', }, base: { name: "p81er", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-bca693, var(--size-svg-bca693));height:var(--height-svg-bca693, var(--size-svg-bca693));}" }, modifiers: { shouldMirror: { true: { name: "2l1fvp", styles: "transform:scaleX(-1);" } }, shouldMirrorInRTL: { true: { name: "2a0edt", styles: "&:dir(rtl){transform:scaleX(-1);}" } } } }, "svg-bca693"); /** * Resolves the size of the SVG based on the size token or string / numeric (px) value. * @param size - The size variant or string / numeric (px) value. * @param tokens - The tokens to use to resolve the size. * @returns The resolved size. */ export const resolveSize = (size, tokens) => { if (size) { return size in tokens ? tokens[size] : typeof size === 'number' ? px2rem(size) : size; } return ''; }; export const Svg = createComponent('span')({ displayName: 'Svg', Component: ({ shouldMirror, shouldMirrorInRTL, src, type, ...elemProps }, ref, Element) => { if ((src === null || src === void 0 ? void 0 : src.type) !== type) { console.error(`Icon type "${src.type}" does not match expected type "${type}"`); return null; } return (_jsx(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...handleCsProp(elemProps, svgStencil({ shouldMirror, shouldMirrorInRTL })) })); }, });