@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
49 lines (48 loc) • 1.82 kB
TypeScript
export declare const SVGICON_CLASSNAME = "k-svg-icon";
declare const options: {
size: ("small" | "medium" | "large" | "xsmall" | "xlarge" | "xxlarge" | "xxxlarge" | undefined)[];
themeColor: ("base" | "error" | "success" | "primary" | "secondary" | "tertiary" | "info" | "warning" | undefined)[];
variant: ("outline" | "solid" | "duotone")[];
};
export type SvgIconOptions = {
size?: (typeof options.size)[number];
themeColor?: (typeof options.themeColor)[number];
variant?: (typeof options.variant)[number];
};
export interface SVGIcon {
name: string;
content: string;
viewBox: string;
variants?: Record<string, string>;
}
export type SvgIconProps = SvgIconOptions & {
rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';
flip?: null | 'v' | 'h' | 'both';
viewBox?: string;
icon?: SVGIcon | 'none';
};
/**
* SvgIcon component - renders decorative SVG-based icons.
*
* @accessibility
* - Always renders `aria-hidden="true"` as icons are decorative
* - Inner SVG also has `aria-hidden` and `focusable="false"`
* - Screen readers will skip this element entirely
*
* @wcag 1.1.1 Non-text Content - decorative images hidden from AT
*/
export declare const SvgIcon: {
(props: SvgIconProps & React.HTMLAttributes<HTMLOrSVGElement>): import("react/jsx-runtime").JSX.Element;
states: any[];
options: {
size: ("small" | "medium" | "large" | "xsmall" | "xlarge" | "xxlarge" | "xxxlarge" | undefined)[];
themeColor: ("base" | "error" | "success" | "primary" | "secondary" | "tertiary" | "info" | "warning" | undefined)[];
variant: ("outline" | "solid" | "duotone")[];
};
className: string;
defaultOptions: {
viewBox: string;
variant: "outline";
};
};
export default SvgIcon;