yq-icons 2.0 矢量组件图标库

yq-icons 是一款企业级的图标资产及多端分发工程库。采用现代化的 “多轨编译、物理隔离、极致按需” 架构设计，旨在提供高可维护性的图标资产分发机制。

🌟 核心分发模式与场景集成

图标库不再提供全量单体 JS，而是通过多轨输出，彻底解决体积膨胀问题，支持以下四种集成消费方式：

1. 现代有构建的 Vue 2 / Vue 3 项目 (首选首推 🚀)

• 技术特点：采用 ES Module (ESM) 进行分单文件编译。每个图标都是一个独立的纯净组件。
• 核心优势：享受现代打包工具（Vite/Webpack）底层的 Tree-shaking 极致按需加载。用户侧包体积与图标库总大小解耦，仅打包真实用到的组件（体积从 4M 骤降为 数 KB）。
• 使用方式：

  // Vue 2 项目中按需消费
  import { LineHome01 } from 'yq-icons/vue2';
  
  // Vue 3 项目中按需消费
  import { LineHome01 } from 'yq-icons/vue3';

2. 有构建的原生 JavaScript / 传统框架项目 (极智 Vanilla 🚀)

• 技术特点：借鉴 Lucide 的 Vanilla 原生替换逻辑。
• 核心优势：零框架依赖，保持 HTML 高度清爽的同时，完美享受打包工具 Tree-shaking 优化。
• 使用方式：

  <i data-yq-icon="LineHome01" size="24" color="#1890ff"></i>
  <script type="module">
    import { createIcons, LineHome01 } from 'yq-icons/vanilla';
    createIcons({
      icons: { LineHome01 }
    });
  </script>

3. 无构建的原生 HTML 页面 (静态外置 SVG Sprite ⚡)

• 技术特点：纯静态 XML SVG 雪碧图拼图文件 /dist/sprite.svg。
• 核心优势：0 运行时 JS 开销，无任何依赖。100% 由浏览器原生渲染并完美享受 HTTP 强缓存，尺寸和颜色可通过 CSS 动态调整。
• 使用方式：

  <svg style="width: 24px; height: 24px; fill: #1890ff;">
    <use href="/libs/yq-icons/dist/sprite.svg#line-home-01"></use>
  </svg>

4. 传统微前端与 CDN 傻瓜式引入 (IIFE 全局注册包 📦)

• 技术特点：专供 CDN 消费的 UMD 全量包 /dist/vanilla/index.global.js。引入后会自动在全局注册所有图标。
• 使用方式：

  <script src="/libs/yq-icons/dist/vanilla/index.global.js"></script>
  <i data-yq-icon="LineHome01" size="24"></i>
  <script>YqIcons.createIcons();</script>

5. 老项目与 CSS 伪元素兼容 (物理隔离安全 Iconfont 👴)

• 技术特点：有且仅有顶级单色单图层的 line 和 solid 目录允许转化为 WOFF 字体，多色图标实施物理编译阻断。
• 防污染设计：类名前缀被严格匹配在特定命名空间 [class^="yq-icon-"] 下，彻底根除了污染宿主项目全局文字的高危全局 CSS 隐患。
• 使用方式：

  <link rel="stylesheet" href="yq-icons/iconfont/yq-icons.css">
  <i class="yq-icon-line-home-01"></i>

📂 图标库包发布产物目录结构

packages/icons/
├── dist/
│   ├── vue2/          # 专为 Vue 2 编译的独立 ESM 函数式组件 (支持 Tree-shaking)
│   ├── vue3/          # 专为 Vue 3 编译的独立 ESM 无状态组件 (支持 Tree-shaking)
│   ├── vanilla/       # 专为原生 JS 编译的按需组件及全量 IIFE CDN 一键包
│   ├── icons/         # 纯净的扁平化 JSON 矢量数据文件，供各端解析
│   ├── sprite.svg     # 独立的纯静态 SVG 雪碧图 (用于 HTML5 href 引用)
│   └── icons.json     # 全量图标元数据映射表 (供文档站消费)
└── iconfont/          # 物理隔离的字体图标及防污染 CSS
    ├── yq-icons.css   # 精准收拢在 .yq-icon-* 下的防污染样式
    ├── yq-icons.woff2 # WOFF2 高压矢量字体文件
    └── ...

🎨 图标开发规范与命名法

图标名称遵循严格的分级命名法：[style]-[group]-[name]

• style (风格分类)：
  • line：线性单色图标，线条均匀，使用 currentColor，支持转换为组件与 Iconfont。
  • solid：面性单色图标，填充饱满，使用 currentColor，支持转换为组件与 Iconfont。
  • line-fun：线性趣味多色图标，线条及着色丰富，不支持转换为 Iconfont（物理阻断）。
  • solid-fun：面性趣味多色图标，着色填充丰富，不支持转换为 Iconfont（物理阻断）。
• group (分类大类)：home、user、system stroke、chart、weather 等物理业务属性。
• name (小名识别)：01、add、search、delete。

🚀 添加新图标自动化发布工作流

1. 拖入文件：将设计师导出的高品质矢量 .svg 文件放入 src/svg/[style]/[group]/ 目录下。
   • 例如：新加首页单色线性图标放入：src/svg/line/home/settings.svg。
2. 批量预处理：运行 npm run build。该指令会依次触发：
   • 自动扫描，提取物理相对一级路径（如 line）做字面量判定。
   • svgo 压缩去除冗余，将单色风格的颜色替换为 currentColor。
   • 自动生成 ESM Vue2、Vue3 组件，元数据 JS，并打包出静态 sprite.svg。
   • 精准提取单色列表转化为 yq-icon-* 安全字体的 CSS。
3. 完成发布：编译完成，发布新版本包至私有 npm，宿主项目即可按需升级。