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

The parent module that contains all Workday Canvas Kit React components

import { CanvasSystemIcon } from '@workday/design-assets-types';
import { CSSObject } from '@emotion/styled';
import { SvgProps } from './Svg';
/**
 * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
 */
export interface SystemIconStyles {
    /**
     * The accent color of the SystemIcon. This overrides `color`.
     */
    accent?: string;
    /**
     * The accent color of the SystemIcon on hover. This overrides `colorHover`.
     * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
     * ```tsx
     * '&:hover': {
     *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
     * }
     * ```
     */
    accentHover?: string;
    /**
     * The background color of the SystemIcon.
     * @default transparent
     */
    background?: string;
    /**
     * The background color of the SystemIcon on hover.
     * @default transparent
     * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
     * ```tsx
     * '&:hover': {
     *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
     * }
     * ```
     */
    backgroundHover?: string;
    /**
     * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
     * @default base.licorice200
     */
    color?: string;
    /**
     * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
     * @default base.licorice200
     * @deprecated `colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please
     * use the following instead in your style overrides:
     * ```tsx
     * '&:hover': {
     *   [systemIconStencil.vars.color]: desiredColorHoverColor
     * }
     * ```
     */
    colorHover?: string;
    /**
     * The fill color of the SystemIcon. This overrides `color`.
     * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
     */
    fill?: string;
    /**
     * The fill color of the SystemIcon on hover. This overrides `colorHover`.
     * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
     * ```tsx
     * '&:hover': {
     *   [systemIconStencil.vars.fill]: desiredFillHoverColor
     * }
     * ```
     */
    fillHover?: string;
}
export interface SystemIconProps extends SystemIconStyles, Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
    /**
     * The icon to display from `@workday/canvas-system-icons-web`.
     */
    icon: CanvasSystemIcon;
    /**
     * The size of the SystemIcon in `px`.
     */
    size?: number | string;
}
/**
 * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
 * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
 * - Style overrides using the `systemIconStencil`:
 *   ```tsx
 *   // styling container
 *
 *   ```
 */
export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;
export declare const systemIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
    /**
     * 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;
    accentColor: string;
    backgroundColor: string;
}, never>, {}, {
    /**
     * 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;
    accentColor: string;
    backgroundColor: string;
}, import("@workday/canvas-kit-styling").Stencil<{
    shouldMirror: {
        true: {
            transform: "scaleX(-1)";
        };
    };
}, {}, {
    width: string; /**
     * The accent color of the SystemIcon. This overrides `color`.
     */
    height: string;
    size: string;
}, never, never>, never>;
export declare const SystemIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconProps>;
//# sourceMappingURL=SystemIcon.d.ts.map