Vite 插件：icons-spritesheet 使用教程

1. 项目的目录结构及介绍

本项目是一个Vite插件，用于监听图标文件夹并根据图标生成spritesheet（精灵图），同时可选地生成TypeScript类型定义文件。项目的目录结构如下：

vite-plugin-icons-spritesheet/
├── .github/              # GitHub相关配置
├── src/                  # 源代码目录
├── test-apps/            # 测试应用目录
├── tests/                # 单元测试目录
├── .eslintrc             # ESLint配置文件
├── .gitignore            # Git忽略文件
├── .prettierrc           # Prettier配置文件
├── CODE_OF_CONDUCT.md    # 行为准则
├── LICENSE               # 许可证文件
├── README.md             # 项目说明文件
├── SECURITY.MD           # 安全策略
├── package-lock.json     # 包锁定文件
├── package.json          # 包配置文件
└── tsconfig.json         # TypeScript配置文件

2. 项目的启动文件介绍

项目的启动主要是通过vite命令来实现的，不需要特别的启动文件。在项目的根目录下，通过以下命令可以启动Vite的开发服务器：

npm run dev

这将启动一个本地服务器，通常在localhost:3000上。

3. 项目的配置文件介绍

项目的配置主要通过vite.config.js文件进行。以下是一个基本的配置文件示例：

import { iconsSpritesheet } from 'vite-plugin-icons-spritesheet';

export default {
  plugins: [
    iconsSpritesheet({
      // 是否生成TS类型定义文件
      withTypes: true,
      // 图标目录路径
      inputDir: 'icons',
      // 输出目录路径
      outputDir: 'public/icons',
      // 类型定义文件的输出路径
      typesOutputFile: 'app/icons.ts',
      // 生成的精灵图文件名
      fileName: 'icon.svg',
      // 当前工作目录
      cwd: process.cwd(),
      // 生成的文件使用的格式化工具
      formatter: 'biome',
      // 图标名称转换回调函数
      iconNameTransformer: (iconName) => iconName
    })
  ]
};

在这个配置文件中，我们导入了iconsSpritesheet插件，并在Vite的插件配置中使用了它。你可以根据需要调整配置项，例如更改图标目录、输出目录或生成的文件名等。

通过上述介绍，你可以开始使用vite-plugin-icons-spritesheet来简化你的项目中的图标管理。