@workday/canvas-kit-react/dist/commonjs/icon/lib/SystemIcon.d.ts

The parent module that contains all Workday Canvas Kit React components

import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
import { CanvasSystemIcon as LegacyCanvasSystemIcon } from '@workday/design-assets-types';
import { SvgProps } from './Svg';
type SystemSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
    /**
     * The accent color of the SystemIcon. This overrides `color`.
     */
    accent?: string;
    /**
     * The background color of the SystemIcon.
     */
    background?: string;
    /**
     * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
     */
    color?: string;
    /**
     * The icon to display from `@workday/canvas-system-icons-web`.
     */
    icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
    /**
     * The size of the SystemIcon in size variants or string / numeric (px) values.
     * **System icon sizes**
     * - `xxs`: 14px / 0.875rem
     * - `xs`: 16px / 1rem
     * - `sm`: 18px / 1.125rem
     * - `md`: 20px / 1.25rem
     * - `lg`: 24px / 1.5rem
     * - `xl`: 32px / 2rem
     * @default `24px`
     */
    size?: SystemSize | string | number;
}
export declare const systemIconStencil: import("@workday/canvas-kit-styling").Stencil<{}, {}, {
    /**
     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
     * wish to change the accent layer independently, also set the `accentColor` variable
     */
    color: string;
    /**
     * This will set the icon's accent color for the `.wd-icon-accent` SVG layer.
     */
    accentColor: string;
    /**
     * This will set the icon's background color for the `.wd-icon-background` SVG layer.
     */
    backgroundColor: string;
}, import("@workday/canvas-kit-styling").Stencil<{
    shouldMirror: {
        true: {
            transform: string;
        };
    };
    shouldMirrorInRTL: {
        true: {
            '&:dir(rtl)': {
                transform: string;
            };
        };
    };
}, {}, {
    width: string;
    height: string;
    size: string;
}, never, never>, never>;
export declare const SystemIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconProps>;
export {};
//# sourceMappingURL=SystemIcon.d.ts.map