图标

用于生成一个图标。

基础用法

通过 NueIcon 标签生成图标。

通过 name 属性指定生成的图标。

<template>
    <nue-div>
        <nue-icon name="search" />
        <nue-icon name="share" />
        <nue-icon name="setting" />
        <nue-icon name="subscribe" />
    </nue-div>
</template>

大小和颜色

通过 size 属性指定图标大小，接受 CSS FontSize 的合法值，默认为 16px 。

通过 color 属性指定图标颜色，接受 CSS Color 的合法值，默认为字体颜色。

<template>
    <nue-div align="center">
        <nue-icon color="red" name="search" size="14px" />
        <nue-icon color="#A2A" name="share" size="var(--nue-text-md)" />
        <nue-icon color="rgb(0, 100, 255)" name="setting" size="1.25rem" />
    </nue-div>
</template>

图标自旋转

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

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

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

所有图标

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

<template>
    <nue-div align="stretch" vertical>
        <nue-input
            v-model="filterText"
            clearable
            icon="filter"
            placeholder="Filter icons by name"
        />
        <div class="icons">
            <nue-div v-for="icon in filteredIcons" :key="icon" class="icon">
                <nue-icon :name="icon" />
                <nue-text>{{ 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(110px, 1fr));
    gap: 1px;
    align-content: center;
    border-radius: var(--nue-primary-radius);
    border: 1px solid var(--nue-divider-color);
    box-sizing: border-box;
    background-color: var(--nue-divider-color);
    overflow: hidden;

    .icon {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 4px;
        height: 96px;
        background-color: white;

        .nue-icon {
            --icon-size: var(--nue-text-lg);
        }

        .nue-text {
            font-size: var(--nue-text-xs);
        }
    }
}
</style>