logo
简体中文

导航菜单

文档

SmartIcon

简介

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

案例

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

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>

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>

keyword

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

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

size

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

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

关键词示例

用户相关

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

技术相关

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

操作相关

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

多关键词支持

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

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

搜索