@navinc/base-react-components
Version:
Nav's Pattern Library
44 lines (43 loc) • 2.4 kB
TypeScript
import { iconsMap } from '../../icons/index.js';
import { InferComponentProps } from '../../types.js';
import { DetailedHTMLProps, HTMLAttributes } from 'react';
declare const sizeMap: {
small: string;
medium: string;
large: string;
};
export type SizeMapType = keyof typeof sizeMap | number;
export type IconProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
/** Any of our custom SVG icons, or see https://marella.me/material-symbols/demo/ for full list of available symbols. */
name: string;
className?: string;
/** Toggles to the filled outlines version of the icon, if applicable */
isFilled?: boolean;
/** Had 3 default sizes 'small, 'medium', 'large', and any number value, ie: 50 */
size?: SizeMapType;
};
export declare const getIconSize: (size: SizeMapType) => string | number;
type CustomIconComponent = (typeof iconsMap)[keyof typeof iconsMap];
type CustomIconProps = InferComponentProps<CustomIconComponent>;
export declare const CustomIcon: ({ name, className, size, Component, ...rest }: CustomIconProps & {
size?: SizeMapType;
Component?: CustomIconComponent;
}) => import("react/jsx-runtime").JSX.Element | null;
/**
* Icon component that handles both our existing custom SVG icons, and uses Material Symbols.
* CustomIcon is exported separately if we ever need to use it. By default we should only need to use Icon.
*
* @description Adds a loading spinner with a pulsing color animation and a message.
*
* @returns either one of our `<svg>` custom icons, or a `<span>` Material Symbols font icon
*/
export declare const Icon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
/** Any of our custom SVG icons, or see https://marella.me/material-symbols/demo/ for full list of available symbols. */
name: string;
className?: string;
/** Toggles to the filled outlines version of the icon, if applicable */
isFilled?: boolean;
/** Had 3 default sizes 'small, 'medium', 'large', and any number value, ie: 50 */
size?: SizeMapType;
}, never>> & string & Omit<({ name, className, size, isFilled, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>;
export {};