Icon

Vunix has a component called VIcon which is used to display vector icons from a collection of 100,000 open source icons.

Overview

The VIcon component generates a vector icon based on the name prop provided. You can find the collection of icons available in Vunix here.

Vunix <VIcon> component generate a vector icon according the provided name prop.

<VIcon name="mdi:emoticon-happy" />

Sizes

You can use the size prop to adjust the size of the icon. This can be done by providing the SizeEnum value or specifying the size in pixels (px), ems (em), or rems (rem).

<VIcon name="mdi:emoticon-happy" size="sm" />
<VIcon name="mdi:emoticon-happy" size="md" />
<VIcon name="mdi:emoticon-happy" size="lg" />

Preset configuration

You can find here the interface of the IconConfig to customize the preset

export interface IconConfig extends DefaultConfig {
  sizes: MethodOrObject, // Contain all sizes key / value
}

Here the exemple from the default Icon.config.ts vunix preset which is built on top of Tailwind CSS.

const config = {
  class: 'inline align-middle',
  variants: {
    default: '',
  },
  sizes: {
    [SizeEnum.sm]: '1em',
    [SizeEnum.md]: '2em',
    [SizeEnum.lg]: '3em',
  },
  defaults: {
    size: SizeEnum.md
  }
} as IconConfig;