๐ข Icon
Basic
By default, we use the
heroicons
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
Default Icons
These icons are configured by default. They are used globally in the components such as
NInput
andNAlert
.
If you want to update or add default icons, you can do so through the Configuration section.
Icon Name | Icon |
---|---|
i-loading | i-tabler-loader-2 |
i-warning | i-heroicons-exclamation-triangle-20-solid |
i-error | i-heroicons-exclamation-circle-20-solid |
i-success | i-heroicons-check-circle-20-solid |
i-info | i-heroicons-information-circle-20-solid |
i-close | i-heroicons-x-20-solid |
Props
export interface NIconProps {
/**
* Icon name
*
* @example
* 'i-heroicons-chevron-up'
*/
name: string
}
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>
Table of Contents