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.