@progress/kendo-react-common
Version:
React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package
80 lines (79 loc) • 3.22 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { IconThemeColor } from './models/theme-color.js';
import { IconSize } from './models/size.js';
import { IconFlip } from './models/flip.js';
/**
* @hidden
*/
export interface BaseIconProps {
/**
* Sets the `tabIndex` of the icon element.
*/
tabIndex?: number;
/**
* Sets the `id` of the icon element.
*/
id?: string;
/**
* Sets additional CSS styles to the icon.
*/
style?: React.CSSProperties;
/**
* Specifies a list of CSS classes that will be added to the root DOM element.
*/
className?: string;
/**
* Specifies the theme color of the Icon.
*
* The possible values are:
* * `inherit` (Default)—Applies coloring based on the current color.
* * `primary` —Applies coloring based on primary theme color.
* * `secondary`—Applies coloring based on secondary theme color.
* * `tertiary`— Applies coloring based on tertiary theme color.
* * `info`—Applies coloring based on info theme color.
* * `success`— Applies coloring based on success theme color.
* * `warning`— Applies coloring based on warning theme color.
* * `error`— Applies coloring based on error theme color.
* * `dark`— Applies coloring based on dark theme color.
* * `light`— Applies coloring based on light theme color.
* * `inverse`— Applies coloring based on inverse theme color.
*
* If the property is not set, the icon inherits the color from its parent.
*
* You can use the `style` prop to apply custom color related properties to the icon.
*/
themeColor?: IconThemeColor;
/**
* Specifies the size of the icon.
*
* The possible values are:
* * `default` (Default)—Font-size: 16px; Width: 16px; Height: 16px.
* * `xsmall`—Font-size: 12px; Width: 12px; Height: 12px.
* * `small`—Font-size: 14px; Width: 14px; Height: 14px.
* * `medium`—Font-size: 16px; Width: 16px; Height: 16px.
* * `large`—Font-size: 20px; Width: 20px; Height: 20px.
* * `xlarge`—Font-size: 24px; Width: 24px; Height: 24px.
* * `xxlarge`—Font-size: 32px; Width: 32px; Height: 32px.
* * `xxxlarge`—Font-size: 48px; Width: 48px; Height: 48px.
*
* You can use the `style` prop to apply custom font size to the icon.
*/
size?: IconSize;
/**
* Specifies the icon flip direction.
*
* The possible values are:
* * `default` (Default)—No flipping applied.
* * `horizontal`—Flips the icon in horizontal direction.
* * `vertical`—Flips the icon in vertical direction.
* * `both`—Flips the icon in both horizontal and vertical directions.
*
*/
flip?: IconFlip;
}