# YM UI Icons

一套 UI 输出的常用图标集合。

## 使用图标

- 仅支持 Vue3 项目，支持 `Tree-Shaking`

- 可以直接在项目里像用例一样**直接使用**

- 如若想查看所有可用的 SVG 图标请查阅 Sets 页面

## 安装

使用包管理器

```bash
# npm
$ npm install @yimian-ui/icons
# yarn
$ yarn add @yimian-ui/icons
# pnpm
$ pnpm install @yimian-ui/icons
```

## 基础用法

### 结合 el-icon 使用

```vue
<template>
  <div>
    <el-icon>
      <Search />
    </el-icon>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@yimian-ui/icons'
</script>
```

### 直接使用 SVG 图标

```vue
<template>
  <div>
    <!-- 由于 SVG 图标默认不携带任何属性，需要直接提供它们 -->
    <Search style="width: 1em; height: 1em;" />
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@yimian-ui/icons'
</script>
```

---

## 维护指南

项目归类在 `packages/icons` 目录下，Icon SVG 文件存放在 `sets` 文件夹中。

如若更新 Icon，可以选择全量替换 `sets` 文件夹，或者在对应具体目录下更新单个 SVG 文件。

### 注意事项

1. `sets/<dir>` 子目录的文件名将作为 `Sets` Page 图标 Tab 归类的依据

2. SVG 文件名遵循为 `kebabCase` 命名规范

3. **不要**以数字作为 SVG 文件名开头，否则将强制补齐前缀 `The`

4. 在实际项目引用中，svg 将转换为 [Pascal](https://baike.baidu.com/item/%E9%A9%BC%E5%B3%B0%E5%91%BD%E5%90%8D%E6%B3%95/7560610) 命名法
   - `3d-cursor` svg 将转换为 `The3dCursor`
   - `shrink-screen` svg 将转换为 `ShrinkScreen`

### 更新

当有新 Icon svg 更新时，使用如下命令进行重新打包：

```bash
pnpm build
```