SmartIcon

简介

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

案例

user

settings

home

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="用户" size="24px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="设置" size="24px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="搜索" size="24px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="文档" size="24px" color="#8b5cf6" />

<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>

Props

class

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

默认样式

自定义样式

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<div style="display: flex; gap: 1rem; align-items: center;">
  <SmartIcon
    keyword="用户"
    size="32px"
    color="#8b5cf6"
    class="custom-smart-icon"
  />
  <SmartIcon
    keyword="设置"
    size="32px"
    color="#8b5cf6"
    class="custom-smart-icon"
  />
  <SmartIcon
    keyword="搜索"
    size="32px"
    color="#8b5cf6"
    class="custom-smart-icon"
  />
</div>

<style>
  .custom-smart-icon {
    border-radius: 8px;
    padding: 8px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
  }

  .custom-smart-icon:hover {
    background-color: #e9ecef;
    transform: scale(1.1);
  }
</style>

<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 属性自定义智能图标的颜色。

蓝色

绿色

橙色

红色

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<div style="display: flex; gap: 1rem; align-items: center;">
  <SmartIcon keyword="用户" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="用户" size="24px" color="#3b82f6" />
  <SmartIcon keyword="用户" size="24px" color="#10b981" />
  <SmartIcon keyword="用户" size="24px" color="#f59e0b" />
</div>

<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 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

settings

home

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="用户" size="24px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="设置" size="24px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="搜索" size="24px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="文档" size="24px" color="#8b5cf6" />

<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>

size

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

16px

24px

32px

48px

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="用户" size="16px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="用户" size="24px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="用户" size="32px" color="#8b5cf6" />

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<SmartIcon keyword="用户" size="48px" color="#8b5cf6" />

<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="24px" />
            <span style="font-size: 0.875rem; color: #6b7280;">24px</span>
        </div>
        <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>

关键词示例

用户相关

user

person

account

profile

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
  <SmartIcon keyword="用户" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="人" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="账号" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="个人" size="24px" color="#8b5cf6" />
</div>

<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>

技术相关

code

github

settings

tools

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
  <SmartIcon keyword="代码" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="数据库" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="网络" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="API" size="24px" color="#8b5cf6" />
</div>

<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>

操作相关

edit

delete

save

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
  <SmartIcon keyword="设置" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="搜索" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="编辑" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="删除" size="24px" color="#8b5cf6" />
</div>

<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>

多关键词支持

SmartIcon 支持多个关键词，用空格或逗号分隔，系统会按顺序查找匹配的图标。

user profile

search,find

settings config

home,main,index

---



import { SmartIcon } from "@coffic/cosy-ui";
---

<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
  <SmartIcon keyword="用户 设置" size="32px" color="#8b5cf6" />
  <SmartIcon keyword="代码,编程,开发" size="32px" color="#8b5cf6" />
  <SmartIcon keyword="搜索 查找" size="32px" color="#8b5cf6" />
</div>

<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>