🟢 Icon

Basic

By default, we use the radix-iconslucideheroicons and tabler for the icons, you can use any icon provided by Iconify through icones, refer to configuration for more information.

use the NIcon tag to create a basic icon.

Hover 
<template>
  <div class="flex flex-wrap items-center gap-4">
    <NIcon name="i-heroicons-bell" />

    <NIcon
      name="i-logos-adobe-illustrator"
      size="2xl"
      class="text-primary"
    />

    <NIcon
      name="i-logos-adobe-xd"
      size="2xl"
      class="text-primary"
    />

    <NIcon
      name="i-logos-linux-tux"
      size="6xl"
    />

    <NIcon
      name="i-logos-airbnb"
      size="6xl"
    />

    <NIcon name="i-heroicons-sun-20-solid dark:i-heroicons-moon-20-solid" />

    <NIcon
      name="i-twemoji-black-heart hover:i-twemoji-beating-heart"
      size="hover:xl"
    />

    <NIcon name="i-twemoji-backhand-index-pointing-left" />

    <span>
      Hover
    </span>
  </div>
</template>

Default Icons

These icons are configured by default. They are used globally in the components such as NInput and NAlert.

If you want to update or add default icons, you can do so through the Configuration section.
Icon NameIcon
i-loadingi-tabler-loader-2
i-warningi-heroicons-exclamation-triangle-20-solid
i-errori-heroicons-exclamation-circle-20-solid
i-successi-heroicons-check-circle-20-solid
i-infoi-heroicons-information-circle-20-solid
i-closei-heroicons-x-20-solid
<template>
  <div class="flex flex-wrap items-center gap-4" size="2xl">
    <NIcon name="i-info" text-info />

    <NIcon name="i-success" text-success />

    <NIcon name="i-warning" text-warning />

    <NIcon name="i-error" text-error />

    <NIcon name="i-loading" animate-spin />

    <NIcon name="i-close" />
  </div>
</template>

Props

import type { HTMLAttributes } from 'vue'

export interface NIconProps {
  /**
   * Icon name
   *
   * @example
   * 'i-heroicons-chevron-up'
   */
  name: HTMLAttributes['class']
}

Presets

type IconPrefix = 'icon'

export const staticIcon: Record<`${IconPrefix}-${string}`, string> = {
  // base
  'icon-base': 'flex-none',
}

export const dynamicIcon: [RegExp, (params: RegExpExecArray) => string][] = []

export const icon = [
  ...dynamicIcon,
  staticIcon,
]

Component

<script setup lang="ts">
import type { NIconProps } from '../../types'

defineProps<NIconProps>()
</script>

<template>
  <span icon-base :class="name" />
</template>
Edit this page on GitHub
Table of Contents