@mxmweb/zui-icons

基于 Vite + SVGR 的图标库，支持组件化渲染与懒加载索引。

安装

请在宿主项目安装 peer 依赖（版本以你的平台统一为准）：

# pnpm（推荐）
pnpm add @mxmweb/zui-icons react react-dom

# 或 yarn
# yarn add @mxmweb/zui-icons react react-dom

# 或 npm
# npm i @mxmweb/zui-icons react react-dom

注意：本包把 react、react-dom 作为 peerDependencies，不会被打包进来。

使用

• Icon 组件（按路径渲染）

import { Icon } from '@mxmweb/zui-icons';

export default () => (
  <div>
    <Icon type="rag/pdf" width={24} height={24} />
  </div>
);

• Icons 索引对象（一次性加载，适用于构建期确定场景）

import { Icons } from '@mxmweb/zui-icons';

const Pdf = (Icons as any).rag?.pdf;

export default () => (Pdf ? <Pdf width={24} height={24} /> : null);

• LazyIcons 懒加载索引（按需异步加载，首屏更轻）

import { LazyIcons } from '@mxmweb/zui-icons';

const Pdf = (LazyIcons as any).rag?.pdf;

export default () => (
  <React.Suspense fallback={null}>
    {Pdf ? <Pdf width={24} height={24} /> : null}
  </React.Suspense>
);

目录与命名

• 放置于 src/**/xxx.svg 的图标，会被自动收录为 Icons.<目录>.<文件名>，并可通过 <Icon type="目录/文件名" /> 渲染。
• 例如：src/rag/pdf.svg → Icons.rag.pdf / <Icon type="rag/pdf" />

本地开发

# 安装依赖（在 monorepo 根执行）
pnpm i

# 启动示例（在本包目录）
pnpm -C ui/zui-icons run dev

发布说明

• 构建产物默认外部化 react、react-dom 等，不会内联第三方依赖。
• dist/package.json 会声明 peerDependencies，请确保宿主项目已安装对应版本。