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

The parent module that contains all Workday Canvas Kit React components

import { CSProps } from '@workday/canvas-kit-styling';
import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
import { CanvasSystemIcon as LegacyCanvasSystemIcon } from '@workday/design-assets-types';
export declare enum SystemIconCircleSize {
    xs = 16,
    s = 24,
    m = 32,
    l = 40,
    xl = 64,
    xxl = 120
}
type SystemIconCircleCommonProps = {
    /**
     * The icon to display from `@workday/canvas-system-icons-web`.
     */
    icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
    /**
     * The size token of the SystemIconCircle.
     * @default SystemIconCircleSize.l
     */
    size?: SystemIconCircleSize | string | number;
    /**
     * If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to
     * always mirror the icon regardless of the content direction. If the SVG should mirror only when
     * in an right-to-left language, use `shouldMirrorInRTL` instead.
     * @default false
     */
    shouldMirror?: boolean;
    /**
     * If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction
     * is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases.
     * Setting this to `true` indicates the icon should be mirrored in right-to-left languages.
     * @default false
     */
    shouldMirrorInRTL?: boolean;
    /**
     * If set to `true`, the icon will be displayed in inverse mode.
     * @default false
     */
    inverse?: boolean;
} & CSProps;
/**
 * Circle fill and icon color. When `background` is set, `color` is required so foreground/background
 * stay paired for contrast.
 */
export type SystemIconCircleProps = (SystemIconCircleCommonProps & {
    background?: never;
    color?: never;
}) | (SystemIconCircleCommonProps & {
    background: string;
    color: string;
});
export declare const systemIconCircleStencil: import("@workday/canvas-kit-styling").Stencil<{
    inverse: {
        true: ({ background, color }: {
            background: `--${string}`;
            color: `--${string}`;
            size: `--${string}`;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            [x: string]: `var(--${string}, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1))))` | `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
            background: `var(--${string}, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1))))`;
        };
    };
}, {}, {
    background: string;
    color: string;
    size: string;
}, never, never>;
export declare const SystemIconCircle: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconCircleProps>;
export {};
//# sourceMappingURL=SystemIconCircle.d.ts.map