Icon

Renders an SVG icon identified by a name string looked up in the built-in icon library, or by a custom paths array for arbitrary SVG shapes. Color resolution supports theme color keys, raw CSS color strings, and dynamic values pulled from an extraData object via colorKey. The name prop also supports mustache-style interpolation ({{propertyName}}) resolved against extraData.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | No* | — | Icon identifier from the built-in library. Supports {{key}} interpolation against extraData. Required unless paths is provided. | | paths | IconPath[] | No* | — | Custom SVG path definitions. Overrides the library lookup. Required unless name is provided. | | pathsKey | string | No | — | Key in extraData whose value replaces the resolved paths array. | | size | number | No | 24 | Width and height of the SVG in pixels. | | color | string | No | theme text | Color applied to all paths. Accepts theme keys (e.g. 'primary') or any CSS color string. | | colorKey | string | No | — | Key in extraData used as the icon color, taking priority over color. | | extraData | any | No | {} | Object used for colorKey lookup and name interpolation. | | style | React.CSSProperties | No | {} | Inline styles applied to the SVG wrapper. |

IconPath shape

| Field | Type | Required | Description | |-------|------|----------|-------------| | d | string | Yes | SVG path d attribute. | | color | string | No | Per-path color override (applied before the component-level color). |

Usage

By name

import Icon from '@/components/Icon';

export default function Example() {
  return <Icon name="edit" size={20} color="primary" />;
}

Custom SVG paths

import Icon from '@/components/Icon';

const customPaths = [
  { d: 'M12 2L2 22h20L12 2z' },
];

export default function Example() {
  return <Icon paths={customPaths} size={32} color="#e74c3c" />;
}

Dynamic color from data

import Icon from '@/components/Icon';

const item = { statusColor: '#27ae60' };

export default function Example() {
  return (
    <Icon
      name="circle"
      size={12}
      colorKey="statusColor"
      extraData={item}
    />
  );
}

Interpolated name from data

import Icon from '@/components/Icon';

const item = { iconName: 'star' };

export default function Example() {
  return <Icon name="{{iconName}}" extraData={item} size={24} />;
}