yq-icons

YQ Design 图标库，支持 Web Component 和字体图标两种使用方式。

安装

npm install yq-icons
# 或
pnpm add yq-icons

使用方式

1. Web Component (推荐)

适用于 Vue、React、原生 HTML 等任何框架。

// ES Module 引入
import 'yq-icons'

<!-- 直接使用 -->
<yq-icon name="line-home-01" size="24" color="#1890ff"></yq-icon>

属性说明：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | name | string | - | 图标名称（必填） | | size | string/number | 1em | 图标尺寸，数字会自动加 px | | color | string | currentColor | 图标颜色 |

2. 字体图标

<link rel="stylesheet" href="yq-icons/iconfont/iconfont.css">

<i class="line-home-01"></i>
<i class="solid-user-01"></i>

3. CDN / Script 标签

<script src="yq-icons/dist/yq-icons.js"></script>

<!-- Web Component 自动注册，直接使用 -->
<yq-icon name="line-home-01"></yq-icon>

图标分类

• line - 线性图标
• solid - 面性图标
• line-fun - 线性趣味
• solid-fun - 面性趣味
• glass - 毛玻璃质感

获取图标列表

// 运行时获取所有图标名称
console.log(window.YqIcons.icons)

// 或导入 JSON 文件
import icons from 'yq-icons/icons'

构建产物

| 文件 | 说明 | |------|------| | dist/yq-icons.js | Web Component + 内嵌 SVG Sprite | | dist/sprite.svg | 独立 SVG Sprite 文件 | | dist/icons.json | 图标名称列表 | | iconfont/ | 字体图标文件 |

开发

# 打包全部（Sprite + 字体）
npm run build

# 仅打包 Sprite
npm run build:sprite

# 仅打包字体图标
npm run build:font