@patreon/studio/module/components/Icon/types.d.ts

Patreon Studio Design System

import type { BaseProps, StylableProps } from '~/types/component';
import type { DefaultColorToken, SpaceToken } from '~/types/tokens';
import type { ValueOrResponsive } from '~/utilities/opaque-responsive';
export type IconComponent = React.FC<IconProps>;
export type Size = '8px' | '10px' | '12px' | '16px' | '20px' | '24px' | '32px' | '40px' | '48px' | '64px' | '88px';
export type VerticalAlign = 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
export interface IconProps extends React.AriaAttributes, BaseProps, StylableProps {
    /**
     * Size of icon. Use `Icon.Size` namespace. Accepts responsive values
     */
    size?: ValueOrResponsive<Size>;
    /**
     * Color is used to fill the icon.
     */
    color?: DefaultColorToken | 'currentColor' | 'inherit' | 'transparent';
    /** Flag to display a highlighted circle around the icon */
    highlight?: boolean;
    /** Controls the color of the highlighted circle */
    highlightColor?: DefaultColorToken;
    /** Controls the width and height of the highlighted circle  */
    highlightSize?: SpaceToken;
    /**
     * CSS [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title).
     * Displays over the icon on hover and is what's read by a screen reader.
     */
    title?: string;
    /**
     * CSS [vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align).
     */
    verticalAlign?: VerticalAlign;
}
export interface IconWrapperProps extends IconProps {
    /**
     * children
     */
    children: React.ReactNode;
    /**
     * ref
     * */
    innerRef?: React.Ref<HTMLDivElement>;
}