# @askrjs/askr/foundations/icon

> Published API exports for @askrjs/askr/foundations/icon.

Source: [https://askrjs.com/docs/reference/api/askr/foundations--icon](https://askrjs.com/docs/reference/api/askr/foundations--icon)

Status: stable. Packages: @askrjs/askr/foundations/icon.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 12 exports from the declarations shipped by @askrjs/askr.

### `getIconContractProps`

```ts
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.

### `IconBase`

```ts
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.

### `IconOwnProps`

```ts
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;

### `IconProps`

```ts
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;

### `IconSizeToken`

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

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

### `IconStyleObject`

```ts
IconStyleObject: Record<string, unknown>
```

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

### `isIconSizeToken`

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

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

### `joinIconStyle`

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

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

### `normalizeIconSizeValue`

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

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

### `resolveIconSizeVariable`

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

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

### `resolveIconStrokeWidthVariable`

```ts
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.

### `serializeIconStyle`

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

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

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/askr/foundations--structures/index.md) | [Next](https://askrjs.com/docs/reference/api/askr/resources/index.md)