图标

生成一个图标。

基础用法

通过组件标签 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=".875rem">{{ icon }}</nue-text>
            </nue-div>
        </div>
    </nue-div>
</template>

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

const filterText = ref('');
const icons = [
    'archive',
    'inbox-fill',
    'inbox',
    'square-check-fill',
    'square-check',
    'square',
    'check',
    'priority-1',
    'priority-2',
    'priority-3',
    'select',
    'connection',
    'logo',
    'lock',
    'files',
    'menu',
    'arrow-right-more',
    'arrow-left-more',
    'projects',
    'board',
    'drive',
    'plus',
    'location',
    'download',
    'upload',
    'picture',
    'history',
    'chat',
    'subscribe',
    'refresh',
    'warning',
    'setting',
    'loading',
    'eye',
    'clear',
    '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',
    'plus-circle-fill',
    'more2',
    'mail',
    'theme',
    'scan',
    'eye-close',
    'arrow-right',
    'arrow-left',
    'arrow-down',
    'arrow-up'
];

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(8rem, 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: white;
    }
}
</style>