qingicon-vue

QingIcon Vue

QingIcon 的 Vue 3 组件库 —— 一套标准化、中性风格的 UI 图标库，包含 3900+ 图标，覆盖云服务、AI、互联网系统产品等场景。个人与商业使用均免费，由 Asorn 设计。

特性

• 34 个分类、3900+ 图标：标准化、中性风格，尺寸统一、视觉重量均衡，涵盖云服务、AI、系统 UI 等。
• 每图标一个组件：QiCarDoor、QiHome、QiSearch …… 全部带类型定义，且支持 tree-shaking。
• 线性（单色）图标：当前所有图标均为 line 变体（单色，由 currentColor 驱动）。填充（fill）变体已在路线图中，填充数据上线后即可渲染。
• 光学尺寸（optical sizing）：通过 optical 属性在小尺寸下自动加粗描边，保持视觉重量一致。
• 可控描边宽度：自由设置 strokeWidth；开启 optical 时会随尺寸自动缩放。
• 颜色取自 currentColor：默认继承文字颜色，可用 color 覆盖。
• TypeScript 就绪：内置 .d.ts 类型，props 完整类型化。
• 零运行时依赖：仅需 vue >= 3.3 作为 peer dependency。

安装

npm install qingicon-vue

需要 vue >= 3.3（peer dependency）。

使用

按需引入具名组件：

<script setup>
import { QiCarDoor, QiHome, QiSearch } from "qingicon-vue";
</script>

<template>
  <QiCarDoor />                                <!-- 24px，继承颜色 -->
  <QiCarDoor :size="32" color="#e11d48" />     <!-- 32px，红色 -->
  <QiSearch :stroke-width="2" />               <!-- 描边宽度 2（默认 1.5） -->
  <QiCarDoor :size="16" :stroke-width="2" optical /> <!-- optical：小尺寸下自动加粗 -->
</template>

通用 Icon 组件

如果编译期不知道具体图标（例如运行时从 QingIcon CDN 取到 SVG 文本），可用通用 Icon 并传入 svg：

<script setup>
import { Icon } from "qingicon-vue";
</script>

<template>
  <Icon :svg="svgMarkup" :size="28" color="#0ea5e9" />
</template>

Icon 也支持默认导入：

<script setup>
import Icon from "qingicon-vue";
</script>

按需打包（tree-shaking）

每个图标都是独立模块，打包器只保留你实际 import 的那些：

请直接用具名组件（import { QiHome } from "qingicon-vue"）。注意 UMD/CJS 产物（require）包含全部图标，tree-shaking 仅对 ESM 生效。

属性

具名图标组件与通用 Icon 共享以下视觉 props；通用 Icon 额外需要传入 svg。

具名组件上的其他 HTML 属性会透传至根 <svg>。

关键词

icon · icons · svg · vector · vue · vue3 · vue-component · vue-icons · ui · ui-kit · icon-set · icon-library · line-icon · fill-icon · open-source · apache-2.0

链接与署名

• 官网： qingicon.com
• 作者： Asorn
• Github： qingicon-open
• 联系： cjl294114430@gmail.com
• 许可证： Apache-2.0

QingIcon 是一个开源项目，欢迎通过上述联系方式提交贡献与反馈。