@ycloud-web/icons-vue

YCloud Icons

语言：中文 | English

YCloud Icons 是 YCloud 的多框架 SVG 图标组件库，面向产品前端、后台系统和设计工程化场景。

本项目基于 Lucide 二次开发，保留上游 ISC 许可证与必要的第三方授权说明，并在此基础上调整了 YCloud 品牌、中文文档、包命名、多框架发布和图标维护流程。

它提供一致的图标源数据、可 tree-shaking 的组件包、静态资源包和图标数据包。业务项目只需要安装对应框架包，即可按需引入图标组件，并获得 TypeScript 自动补全、重构和类型检查体验。

仓库同时维护三类 SVG 资产：

• 通用图标：位于 icons/，使用 24x24 线性 SVG、icons/*.json 元数据和通用分类体系。
• 业务图标：位于 business-icons/，按 outlined、filled、multicolor 区分颜色模式，文件名使用 kebab-case，通过各包的 business 子入口和静态包的 business-icons/、business-font/ 输出。
• 插画：位于 illustration-icons/，按用途分类并保留原始 SVG 颜色和尺寸属性，通过各包的 illustration 子入口和静态包的 illustration-icons/ 输出。

资源选择与维护规则分别见业务图标指南、插画指南和图标维护指南。

包

@ycloud-web/icons-data 同时提供通用图标节点数据、业务图标 SVG / data URI 数据和插画 SVG / data URI 数据。

使用示例

React：

import { Camera } from '@ycloud-web/icons-react';

export function Example() {
  return (
    <Camera
      size={24}
      color="currentColor"
    />
  );
}

Vue：

<script setup lang="ts">
import { Camera } from '@ycloud-web/icons-vue';
</script>

<template>
  <Camera
    :size="24"
    color="currentColor"
  />
</template>

Core JavaScript：

import { createIcons, Camera } from '@ycloud-web/icons';

createIcons({
  icons: {
    Camera,
  },
});

业务图标 React：

import { WhatsappOutlined } from '@ycloud-web/icons-react/business';

export function BusinessExample() {
  return (
    <WhatsappOutlined
      size={24}
      color="currentColor"
    />
  );
}

业务图标静态字体：

<link
  rel="stylesheet"
  href="https://unpkg.com/@ycloud-web/icons-static@latest/business-font/ycloud-business.css"
/>

<span
  class="business-icon-whatsapp-outlined"
  aria-hidden="true"
></span>

插画 React：

import { EmptyPage } from '@ycloud-web/icons-react/illustration';

export function IllustrationExample() {
  return (
    <EmptyPage
      width="100%"
      height="auto"
    />
  );
}

设计目标

• 组件化体验：在 React、Vue 等框架中以真实组件方式使用图标。
• 按需打包：业务只会打包实际导入的图标，避免引入未使用资源。
• 强类型提示：组件名、属性和图标数据都提供类型声明，便于补全、检查和重构。
• 一源多端：通用图标、业务图标和插画分别从源码目录生成多框架包、静态资源和图标数据。
• 可持续维护：生成链路基于稳定的 SVG 数据、构建脚本和包发布流程。

风格策略

通用图标位于 icons/，采用 24x24 线性风格，并从各框架包的默认入口导出，例如 Camera。业务图标通过 business 子入口独立导出，源码按 outlined、filled、multicolor 颜色模式分目录；组件名由文件名生成，因此会出现 CallingOutlined、CallingFilled 等带风格后缀的名称。仓库不提供运行时 theme 参数在同一组件名下切换风格。

开发

pnpm install
pnpm icons-react build
pnpm icons-vue build
pnpm docs:dev

常规文档命令与 Lucide 上游保持一致；GitHub Pages 使用单独的优化命令：

# 启动文档开发服务
pnpm docs:dev

# 构建文档但跳过逐页 OG 图
pnpm docs:build:no-og

# GitHub Pages 专用构建：固定 base，关闭 OG 和 llms，跳过 API 构建
pnpm docs:build:github-pages

# 构建文档并额外生成 llms.txt
pnpm --dir docs docs:build:llms

许可证

YCloud Icons 使用 ISC 许可证发布。第三方来源与上游授权信息见 THIRD_PARTY_NOTICES.md，完整许可证文本见 LICENSE。