@patreon/studio
Version:
Patreon Studio Design System
43 lines (42 loc) • 1.81 kB
TypeScript
import type { BaseProps, StylableProps } from '../../types/component';
import type { DefaultColorToken, SpaceToken } from '../../types/tokens';
import type { ValueOrResponsive } from '../../utilities/opaque-responsive';
export declare type IconComponent = React.FC<IconProps>;
export declare type LegacySize = 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
export declare type Size = '8px' | '10px' | '12px' | '16px' | '20px' | '24px' | '32px' | '40px' | '48px' | '64px' | '88px';
export declare 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 | LegacySize>;
/**
* 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>;
}