图标

生成一个图标。

基础用法

通过组件标签 NueIcon 声明一个图标组件。

图标组件目前仅支持 Iconfont 形式，通过属性 name 指定图标内容。

<template>
    <nue-icon name="search" />
</template>

大小

通过属性 size 指定图标大小，接受 CSS FontSize 的合法值，默认继承父元素。

<template>
    <nue-div align="center">
        <nue-icon name="search" size="16px" />
        <nue-icon name="search" size="1.5rem" />
        <nue-icon name="search" size="var(--custom-icon-size)" />
    </nue-div>
</template>

<script lang="ts" setup></script>

<style scoped>
.nue-icon {
    --custom-icon-size: 2rem;
}
</style>

颜色

通过属性 color 指定图标颜色，接受 CSS Color 的合法值，默认继承父元素。

<template>
    <nue-div>
        <nue-icon color="red" name="search" />
        <nue-icon color="#00FF00" name="search" />
        <nue-icon color="var(--custom-icon-color)" name="search" />
    </nue-div>
</template>

<script lang="ts" setup></script>

<style scoped>
.nue-icon {
    --custom-icon-color: rgb(0, 0, 255);
}
</style>

图标自旋转

通过属性 spin 指定图标是否自旋转，接受布尔类型值，默认为 false 。

通过属性 spin-speed 指定图标自旋转速度，接受 CSS Duration 合法值，默认为 2s 。

<template>
    <nue-div>
        <nue-icon name="refresh" spin />
        <nue-icon name="refresh" spin spin-speed="1s" />
    </nue-div>
</template>

所有图标

下方表格列出了所有可用的图标名称，通过 name 属性指定即可使用对应图标。

<template>
    <nue-div align="stretch" vertical>
        <nue-input v-model="filterText" clearable icon="filter" placeholder="筛选" />
        <div class="icons">
            <nue-div v-for="icon in filteredIcons" :key="icon" class="icon-block">
                <nue-icon size="1.75rem" :name="icon" />
                <nue-text size="0.75rem">{{ icon }}</nue-text>
            </nue-div>
        </div>
    </nue-div>
</template>

<script setup>
import { computed, ref } from 'vue';

const filterText = ref('');
const icons = [
    'blank',
    'arrow-right-more',
    'arrow-left-more',
    'menu',
    'time',
    'projects',
    'board',
    'files',
    'drive',
    'history',
    'chat',
    'subscribe',
    'theme',
    'mail',
    'clear-circle',
    'clear',
    'arrow-left-circle',
    'clear-circle-fill',
    'arrow-down-circle',
    'arrow-up-circle',
    'arrow-right-circle',
    'inbox',
    'archive',
    'inbox-fill',
    'square-check-fill',
    'square-check',
    'square',
    'check',
    'priority-1',
    'priority-2',
    'priority-3',
    'select',
    'connection',
    'logo',
    'lock',
    'plus',
    'location',
    'download',
    'upload',
    'picture',
    'refresh',
    'warning',
    'setting',
    'loading',
    'eye',
    'fail',
    'tag',
    'more-vertical',
    'heart',
    'edit',
    'help',
    'success',
    'more',
    'share',
    'calendar',
    'calendar-wrap',
    'filter',
    'delete',
    'search',
    'circle',
    'ring',
    'plus-circle',
    'heart-fill',
    'success-fill',
    'completed',
    'invoices',
    'plus-circle-fill',
    'more2',
    'scan',
    'eye-close',
    'arrow-right',
    'arrow-left',
    'arrow-down',
    'arrow-up'
].sort((a, b) => a.localeCompare(b));

const filteredIcons = computed(() => {
    return icons.filter(icon => icon.includes(filterText.value));
});
</script>

<style scoped>
.icons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    box-sizing: border-box;
    overflow: hidden;

    .icon-block {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
        height: 96px;
        background-color: var(--nue-primary-color-100);
    }
}
</style>

注意事项

1. 图标来源：图标组件基于 Iconfont 字体图标库，需要确保图标字体已正确加载。
2. 继承行为：size 和 color 属性默认继承父元素样式，便于通过 CSS 统一控制。
3. 旋转动画：spin 属性仅控制动画的启停，动画本身由 CSS 实现。
4. 性能考虑：大量使用图标时，建议按需引入需要的图标，避免加载整个图标库。

组件属性与事件

下方涵盖了 NueIcon 组件所有的可用属性与事件。

属性

属性	Type	默认值	说明
name	string	-	图标名称
size	string	-	图标大小，接受 CSS FontSize 值
color	string	-	图标颜色，接受 CSS Color 值
spin	boolean	false	是否旋转
spinSpeed	string	2s	旋转速度，接受 CSS Duration 值
theme	string | string[]	-	主题样式（继承自 GlobalProps）