Icon

Icon component that resolves icons through a customizable resolver. Register your icon library using registerCustomIconResolver.

Import

import { Icon } from 'vuiii'

Basic Usage

View in Storybook

// Basic usage
import { Icon } from 'vuiii'

<Icon name="check" />
<Icon name="user" size="large" />

More Examples

// Different sizes
<Icon name="star" size="small" />
<Icon name="star" size="normal" />
<Icon name="star" size="large" />

// Register custom icon resolver (typically in app setup)
import { registerCustomIconResolver } from 'vuiii'
import { defineAsyncComponent } from 'vue'

registerCustomIconResolver((name) => {
  return defineAsyncComponent(() => import(`./icons/${name}.vue`))
})

// With Heroicons
import * as HeroIcons from '@heroicons/vue/24/outline'

registerCustomIconResolver((name) => {
  const pascalName = name.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('') + 'Icon'
  return HeroIcons[pascalName]
})

// Then use in templates
<Icon name="user" />      // resolves to UserIcon
<Icon name="check" />     // resolves to CheckIcon

Storybook

For interactive examples with all variants, see Icon in Storybook.