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

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

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>

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>

keyword

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

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

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

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

Keyword Examples

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

Multi-Keyword Support

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

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