@pingrui/icons

原创手绘描边 SVG 图标集，以可摇树（tree-shakable）的 Vue 3 组件形式发布。 所有图标统一规格：viewBox="0 0 24 24"、stroke="currentColor"、stroke-width="1.5"、圆角端点，16px 下依然清晰。

安装

pnpm add @pingrui/icons
# 或 npm install @pingrui/icons / yarn add @pingrui/icons

vue@^3.5 为 peerDependency，需由你的项目提供。

若你已使用 @pingrui/ui，图标已内联打包进组件库，无需单独安装本包；仅当你想脱离 @pingrui/ui 直接按需引入图标时才需要。

使用

每个图标都是独立的 Vue 渲染函数组件，按需引入即可摇树：

<script setup lang="ts">
import { Edit, Search, Star } from '@pingrui/icons'
</script>

<template>
  <Edit />
  <Search />
  <Star />
</template>

配合 @pingrui/ui 的 PIcon 容器可统一控制尺寸、颜色与旋转动画：

<script setup lang="ts">
import { PIcon } from '@pingrui/ui'
import { Edit } from '@pingrui/icons'
</script>

<template>
  <PIcon :size="24" color="var(--pr-color-primary)"><Edit /></PIcon>
</template>

全量映射与分类

import { icons, iconCategories } from '@pingrui/icons'

// icons —— 名称到组件的全量映射（引入即全量打包，按需用具名导入而非这个）
// iconCategories —— 按分类（系统/箭头/文档/影音/扩展…）分组的图标名清单

命名约定

图标组件名为裸帕斯卡命名（无前缀，对标 Element Plus）：

| SVG 文件 | 组件名 | | -------- | ------ | | arrow-down.svg | ArrowDown | | edit.svg | Edit | | info-filled.svg | InfoFilled |

License

MIT