Icon

Icon component with preset Material Design icons and support for custom SVG paths. Uses currentColor for easy theming.

Installation

typescript

import { Icon } from '@happyvertical/smrt-svelte';

Preset Icons

Built-in Material Design icons.

chevron-right

chevron-left

chevron-down

check

add

svelte

<Icon name="menu" />
<Icon name="search" />
<Icon name="close" />
<Icon name="check" />
<Icon name="add" />

Sizes

Specify size as a number (pixels) or string.

svelte

<Icon name="search" size={16} />
<Icon name="search" size={24} />
<Icon name="search" size={32} />
<Icon name="search" size="48px" />

Colors

Icons inherit color by default, or specify explicitly.

svelte

<Icon name="check" color="#22c55e" />
<Icon name="close" color="#ef4444" />
<Icon name="add" color="#3b82f6" />

Custom Path

Use any SVG path data for custom icons.

svelte

<Icon path="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />

In Context

Icons work well with buttons and text.

svelte

<button>
  <Icon name="add" size={18} />
  Add Item
</button>

Available Presets

menu

search

close

chevron-right

chevron-left

chevron-down

check

add

Props

Prop	Type	Default	Description
`name`	`string`	-	Preset icon name (menu, search, close, etc.)
`path`	`string`	-	Custom SVG path data (overrides name)
`size`	`string \| number`	`24`	Icon size in pixels or CSS value
`color`	`string`	`'currentColor'`	Icon color
`viewBox`	`string`	`'0 0 24 24'`	SVG viewBox attribute

TypeScript

typescript

import { Icon } from '@happyvertical/smrt-svelte';

interface Props {
  name?: string;
  path?: string;
  size?: string | number;
  color?: string;
  viewBox?: string;
}