SmartIcon

Introduction

The SmartIcon component is an intelligent icon selector that automatically renders the most suitable icon component based on keywords. It supports multiple keywords, prioritizing the first matching icon found, and renders a default icon when no match is found. This component is particularly suitable for scenarios where you need to dynamically select icons based on content, such as search result displays and content category presentations.

Examples

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

Customize the style class name of the smart icon through the class attribute.

默认样式

自定义样式

---



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

Customize the color of the smart icon through the color attribute.

蓝色

绿色

橙色

红色

---



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

Specify keywords for icon matching through the keyword attribute, supporting multiple keywords separated by spaces or commas.

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

Control the size of the smart icon through the size attribute.

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>

Keyword Examples

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>

Multi-Keyword Support

SmartIcon supports multiple keywords separated by spaces or commas. The system will search for matching icons in order.

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>

SmartIcon

Introduction

Examples

Props

class

color

keyword

size

Keyword Examples

User Related

Technology Related

Action Related

Multi-Keyword Support