# @mxmweb/zui-icons

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

## 安装

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

```bash
# 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 组件（按路径渲染）

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

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

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

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

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

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

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

```tsx
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" />`

## 本地开发

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

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

## 发布说明

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