Askr documentation
Generated API snapshot

@askrjs/askr/foundations/icon

Exports from the declarations published in @askrjs/askr. Signatures reflect the published artifact.

Exports

This entrypoint publishes 12 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

getIconContractPropstype

getIconContractProps: ({ size, strokeWidth, color, title, style, iconName }: Pick<IconProps, "color" | "iconName" | "size" | "strokeWidth" | "style" | "title">) => { sizeToken: IconSizeToken | undefined; decorative: string | undefined; iconStyle: string | undefined; attrs: { xmlns: string; width: string; height: string; fill: string; stroke: string; "stroke-width": string; role: string; "aria-hidden": string | undefined; style: string | undefined; "data-slot": string; "data-icon": string | undefined; "data-size": IconSizeToken | undefined; "data-decorative": string | undefined; "data-color": string | undefined; }; }

Compute the shared SVG attributes and inline style implementing the icon size/stroke/color contract.

IconBasetype

IconBase: ({ size, strokeWidth, color, title, class: className, style, iconName, children, ref, ...rest }: IconProps) => JSXElement

Base `<svg>` wrapper implementing the icon contract; generated icon components render into it.

IconOwnPropstype

IconOwnProps: {
  size?: number | string;
  strokeWidth?: number;
  color?: string;
  title?: string;
  class?: string;
  style?: string | IconStyleObject;
  iconName?: string;
}

Props specific to the icon contract, independent of the underlying `<svg>` props.

class
class?: string | undefined;
color
color?: string | undefined;
iconName
iconName?: string | undefined;
size
size?: string | number | undefined;
strokeWidth
strokeWidth?: number | undefined;
style
style?: string | IconStyleObject | undefined;
title
title?: string | undefined;

IconPropstype

IconProps: Omit<Props, 'children' | 'class' | 'color' | 'height' | 'ref' | 'role' | 'stroke' | 'stroke-width' | 'style' | 'title' | 'width'> & IconOwnProps & {
  children?: unknown;
  ref?: Ref<SVGSVGElement>;
}

Full prop set accepted by {@link IconBase} and generated icon components.

children
children?: unknown;
class
class?: string | undefined;
color
color?: string | undefined;
iconName
iconName?: string | undefined;
ref
ref?: Ref<SVGSVGElement>;
size
size?: string | number | undefined;
strokeWidth
strokeWidth?: number | undefined;
style
style?: string | IconStyleObject | undefined;
title
title?: string | undefined;

IconSizeTokentype

IconSizeToken: 'sm' | 'md' | 'lg' | 'xl'

Named icon size presets, mapped to CSS variables at render time.

IconStyleObjecttype

IconStyleObject: Record<string, unknown>

Camel-cased CSS style object accepted by icon `style` props.

isIconSizeTokentype

isIconSizeToken: (value: unknown) => value is IconSizeToken

Check whether `value` is one of the named icon size tokens ('sm'|'md'|'lg'|'xl').

joinIconStyletype

joinIconStyle: (...styles: Array<string | undefined>) => string | undefined

Join non-empty CSS declaration fragments with `;`, dropping any that are blank.

normalizeIconSizeValuetype

normalizeIconSizeValue: (size: number | string) => string

Normalize a numeric icon size to a `px` string; strings pass through unchanged.

resolveIconSizeVariabletype

resolveIconSizeVariable: (size: number | string) => string

Resolve a size (token or literal) to a CSS `var(--ak-icon-size-*, ...)` expression or literal value.

resolveIconStrokeWidthVariabletype

resolveIconStrokeWidthVariable: (strokeWidth: number, sizeToken: IconSizeToken | undefined) => string

Resolve a stroke width to a CSS `var(--ak-icon-stroke-width-*, ...)` expression, scoped to `sizeToken` when given.

serializeIconStyletype

serializeIconStyle: (style: string | IconStyleObject | undefined) => string

Serialize an inline style object (or pass through a string) to a CSS declaration string.