logo
简体中文

导航菜单

文档
Vue

SmartIcon

简介

Vue 版本的 SmartIcon 组件是一个智能图标选择器，能够根据关键词自动渲染最合适的图标组件。它支持多个关键词，优先匹配第一个找到的图标，未匹配时渲染默认图标。该组件特别适用于需要根据内容动态选择图标的场景，如搜索结果显示、内容分类展示等。

案例

user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" />
            <span style="font-size: 0.875rem; color: #6b7280;">home</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="person" />
            <span style="font-size: 0.875rem; color: #6b7280;">person</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="account" />
            <span style="font-size: 0.875rem; color: #6b7280;">account</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">profile</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="code" />
            <span style="font-size: 0.875rem; color: #6b7280;">code</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="github" />
            <span style="font-size: 0.875rem; color: #6b7280;">github</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="tools" />
            <span style="font-size: 0.875rem; color: #6b7280;">tools</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="edit" />
            <span style="font-size: 0.875rem; color: #6b7280;">edit</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="delete" />
            <span style="font-size: 0.875rem; color: #6b7280;">delete</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="save" />
            <span style="font-size: 0.875rem; color: #6b7280;">save</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">user profile</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search,find" />
            <span style="font-size: 0.875rem; color: #6b7280;">search,find</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings config" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings config</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home,main,index" />
            <span style="font-size: 0.875rem; color: #6b7280;">home,main,index</span>
        </div>
    </div>
</template>

Props

class

通过 class 属性自定义智能图标的样式类名。

默认样式
默认样式
自定义样式
自定义样式
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">默认样式</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">默认样式</span>
        </div>
    </div>
</template>
默认样式
默认样式
自定义样式
自定义样式
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" class="custom-icon" />
            <span style="font-size: 0.875rem; color: #6b7280;">自定义样式</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" class="custom-icon" />
            <span style="font-size: 0.875rem; color: #6b7280;">自定义样式</span>
        </div>
    </div>
</template>

<style scoped>
.custom-icon {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transition: transform 0.2s ease-in-out;
}

.custom-icon:hover {
    transform: scale(1.1);
}
</style>

color

通过 color 属性自定义智能图标的颜色。

蓝色
绿色
橙色
红色
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" color="#3b82f6" />
            <span style="font-size: 0.875rem; color: #6b7280;">蓝色</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" color="#10b981" />
            <span style="font-size: 0.875rem; color: #6b7280;">绿色</span>
        </div>
    </div>
</template>
蓝色
绿色
橙色
红色
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" color="#f59e0b" />
            <span style="font-size: 0.875rem; color: #6b7280;">橙色</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" color="#ef4444" />
            <span style="font-size: 0.875rem; color: #6b7280;">红色</span>
        </div>
    </div>
</template>

keyword

通过 keyword 属性指定用于匹配图标的关键词，支持多个关键词用空格或逗号分隔。

user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" />
            <span style="font-size: 0.875rem; color: #6b7280;">home</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="person" />
            <span style="font-size: 0.875rem; color: #6b7280;">person</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="account" />
            <span style="font-size: 0.875rem; color: #6b7280;">account</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">profile</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="code" />
            <span style="font-size: 0.875rem; color: #6b7280;">code</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="github" />
            <span style="font-size: 0.875rem; color: #6b7280;">github</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="tools" />
            <span style="font-size: 0.875rem; color: #6b7280;">tools</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="edit" />
            <span style="font-size: 0.875rem; color: #6b7280;">edit</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="delete" />
            <span style="font-size: 0.875rem; color: #6b7280;">delete</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="save" />
            <span style="font-size: 0.875rem; color: #6b7280;">save</span>
        </div>
    </div>
</template>
user
search
settings
home
user
person
account
profile
code
github
settings
tools
search
edit
delete
save
user profile
search,find
settings config
home,main,index
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">user profile</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search,find" />
            <span style="font-size: 0.875rem; color: #6b7280;">search,find</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings config" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings config</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home,main,index" />
            <span style="font-size: 0.875rem; color: #6b7280;">home,main,index</span>
        </div>
    </div>
</template>

size

通过 size 属性控制智能图标的大小。

16px
20px
32px
48px
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" size="16px" />
            <span style="font-size: 0.875rem; color: #6b7280;">16px</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" size="20px" />
            <span style="font-size: 0.875rem; color: #6b7280;">20px</span>
        </div>
    </div>
</template>
16px
20px
32px
48px
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" size="32px" />
            <span style="font-size: 0.875rem; color: #6b7280;">32px</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" size="48px" />
            <span style="font-size: 0.875rem; color: #6b7280;">48px</span>
        </div>
    </div>
</template>

关键词示例

SmartIcon 支持多种类型的关键词，包括用户相关、技术相关、操作相关等。它还支持多个关键词的组合使用，用空格或逗号分隔，系统会按顺序查找匹配的图标。

支持的关键词类型

  • 用户相关：user, person, account, profile
  • 技术相关：code, github, settings, tools
  • 操作相关：search, edit, delete, save
  • 多关键词支持：支持 “user profile”、“search,find” 等组合

搜索