Interface IconPropsWithEmbeddedIcon

interface IconPropsWithEmbeddedIcon {
    ariaHidden?: boolean;
    ariaLabel?: string;
    className?: string;
    color?: "currentColor" | (keyof FillColors);
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    embeddedIcon: string | ComponentClass<Omit<SVGProps<SVGSVGElement>, "ref"> & {
        ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
    }, any> | FunctionComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
        ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
    }>;
    fontSize?: number | "inherit";
    isLoading?: boolean;
    name?: undefined;
    role?: "img";
    skeletonSx?: SxProps<Theme>;
    style?: CSSProperties;
    wrapped?: boolean;
}

Hierarchy (view full)

Properties

ariaHidden? ariaLabel? className? color? customAttribute? embeddedIcon fontSize? isLoading? name? role? skeletonSx? style? wrapped?

Properties

OptionalariaHidden

ariaHidden?: boolean

Aria hidden defaults to true

OptionalariaLabel

ariaLabel?: string

Aria-label for the icon (used in combination with role)

OptionalclassName

className?: string

Override or extend the styles applied to the component

Optionalcolor

color?: "currentColor" | (keyof FillColors)

Color of the icon.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

embeddedIcon

embeddedIcon: string | ComponentClass<Omit<SVGProps<SVGSVGElement>, "ref"> & {
    ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
}, any> | FunctionComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
    ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
}>

Overrides default behavior of fetching svg from remote. Pass a valid path for a *.svg file from your local system. Example: import { Help } from "@sj-ab/component-library.ui.icons"

// then implement like this:
<Icon embeddedIcon={ Help } />

As an ultimate fallback the icon will render in a hmtl tag

OptionalfontSize

fontSize?: number | "inherit"

Indicates the font size for the icon. Converts the number value from px to rem.

OptionalisLoading

isLoading?: boolean

If true, a loading skeleton will be rendered instead of the component.

Optionalname

name?: undefined

Optionalrole

role

The ARIA role of the icon.

OptionalskeletonSx

skeletonSx?: SxProps<Theme>

Optional CSS properties to style the icon skeleton. This prop allows you to customize the icon's appearance.

Optionalstyle

style?: CSSProperties

Optional CSS properties to style the icon. This prop allows you to customize the icon's appearance.

Optionalwrapped

wrapped?: boolean

Return svg without wrapping box.

Settings

Member Visibility

On This Page

Properties