@recurve-ui/icons v0.1.6-beta.0

RDUI Icons

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

使用图标

• 仅支持 Vue 3 项目，支持 Tree-Shaking

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

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

安装

使用包管理器

# npm
$ npm install @recurve-ui/icons
# yarn
$ yarn add @recurve-ui/icons
# pnpm
$ pnpm install @recurve-ui/icons

基础用法

结合 rd-icon 使用

<template>
  <div>
    <rd-icon>
      <Search />
    </rd-icon>
  </div>
</template>

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

直接使用 SVG 图标

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

<script lang="ts" setup>
import { Search } from '@recurve-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 命名法

   • 3d-cursor svg 将转换为 The3dCursor
   • shrink-screen svg 将转换为 ShrinkScreen

更新

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

pnpm build