react-material-symbols
Version:
A simple package for adding Material Symbols to any React project.
28 lines (27 loc) • 1.67 kB
TypeScript
import type { ElementType, CSSProperties, ReactElement } from 'react';
import type { MaterialSymbolWeight, PolymorphicComponentProps, SymbolCodepoints } from './types';
export type { MaterialSymbolWeight, SymbolCodepoints } from './types';
export type MaterialSymbolProps = {
/** Required. The name of the icon to render. */
icon: SymbolCodepoints;
/** Default `false`.
*
* Fill gives you the ability to modify the default icon style. A single icon can render both unfilled and filled states. */
fill?: boolean;
/** Weight defines the symbol’s stroke weight, with a range of weights between thin (100) and heavy (900). Weight can also affect the overall size of the symbol. */
weight?: MaterialSymbolWeight;
/** Weight and grade affect a symbol’s thickness. Adjustments to grade are more granular than adjustments to weight and have a small impact on the size of the symbol. */
grade?: number;
/** Default `'inherit'`.
*
* Size defines the icon width and height in pixels. For the image to look the same at different sizes, the stroke weight (thickness) changes as the icon size scales. */
size?: number;
/** Default `'inherit'`
*
* Color accepts key values (`'red'`, `'blue'`, `'indigo'`, etc.), `<hex-color>`, `<rgb()>`, `<hsl()>` and `<hwb()>` values. */
color?: CSSProperties['color'];
className?: string;
style?: CSSProperties;
};
export type PolymorphicMaterialSymbolProps<C extends ElementType> = PolymorphicComponentProps<C, MaterialSymbolProps>;
export declare const MaterialSymbol: <C extends ElementType<any>>(props: PolymorphicMaterialSymbolProps<C>) => ReactElement;