@wentools/iconic

Svelte 5 icon component with animations and a resolver factory for Lucide icons.

Installation

pnpm add @wentools/iconic

Usage

Direct component usage

<script>
  import { Icon } from '@wentools/iconic'
  import { Search } from '@lucide/svelte'
</script>

<Icon icon={Search} />
<Icon icon={Search} animation="spin" />
<Icon icon={Search} size={24} color="red" />

String-based resolution

Set up a project-specific icon registry:

// src/lib/icons/index.ts
import { createIconResolver } from '@wentools/iconic'
import { Search, Home, Plus } from '@lucide/svelte'

export const iconResolver = createIconResolver({
  search: Search,
  home: Home,
  plus: Plus,
})

export type IconVariant = keyof typeof iconResolver.map

Wire the resolver in your root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import { setIconResolver } from '@wentools/iconic'
  import { iconResolver } from '$lib/icons'

  setIconResolver(iconResolver)
</script>

Then use string variants anywhere:

<Icon icon="search" animation="pulse" />

Animations

Seven built-in animations with prefers-reduced-motion support:

• spin — continuous rotation
• pulse — opacity fade
• bounce — vertical bounce
• shake — horizontal shake
• ping — scale + fade out
• wiggle — rotational wobble (attention nudge)
• throb — scale pulse (active/in-progress indicator)

<Icon icon={Search} animation="spin" />
<Icon icon={Search} animation="bounce" animationDuration={2} />
<Icon icon={Search} animation="pulse" animationIterations={3} />

IconAction type

For components with interactive icons:

import type { IconAction } from '@wentools/iconic'

interface Props {
  actions: IconAction<MyIconVariant>[]
}

API

Icon component

| Prop | Type | Default | Description | |------|------|---------|-------------| | icon | Component \| string | required | Lucide component or string variant | | size | string \| number | 'var(--icon-size, 1rem)' | Icon size | | color | string | 'currentColor' | Icon color | | strokeWidth | number | 2 | Stroke width | | absoluteStrokeWidth | boolean | false | Use absolute stroke width | | animation | IconAnimation | — | Animation type | | animationDuration | number | varies | Duration in seconds | | animationEasing | string | varies | CSS easing function | | animationIterations | number \| 'infinite' | 'infinite' | Iteration count |

createIconResolver(map)

Creates a typed resolver from a { variant: Component } map.

Returns { resolveToComponent, isIconVariant, iconVariants, map }.

setIconResolver(resolver) / getIconResolver()

Svelte context helpers for app-wide string resolution.

License

MIT