Vite Plugin SVG Icons 使用教程
1. 项目的目录结构及介绍
vite-plugin-svg-icons/
├── README.md
├── package.json
├── src/
│ ├── index.ts
│ ├── plugin.ts
│ └── utils/
│ ├── cache.ts
│ └── dom.ts
├── tsconfig.json
└── vite.config.ts
- README.md: 项目说明文档,包含安装和使用说明。
- package.json: 项目依赖和脚本配置文件。
- src/: 源代码目录。
- index.ts: 插件入口文件。
- plugin.ts: 插件核心逻辑。
- utils/: 工具函数目录。
- cache.ts: 缓存管理工具。
- dom.ts: DOM 操作工具。
- tsconfig.json: TypeScript 配置文件。
- vite.config.ts: Vite 配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 src/index.ts
,它是插件的入口文件,负责导出插件的主要功能。
// src/index.ts
import { createSvgIconsPlugin } from './plugin';
export { createSvgIconsPlugin };
3. 项目的配置文件介绍
vite.config.ts
vite.config.ts
是 Vite 项目的配置文件,用于配置 Vite 的行为。在这个项目中,它用于配置 SVG 图标插件。
// vite.config.ts
import { defineConfig } from 'vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';
export default defineConfig({
plugins: [
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
symbolId: 'icon-[dir]-[name]',
inject: 'body-last',
customDomId: '__svg__icons__dom__',
}),
],
});
tsconfig.json
tsconfig.json
是 TypeScript 项目的配置文件,用于配置 TypeScript 编译器的行为。
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src"]
}
以上是 Vite Plugin SVG Icons 项目的目录结构、启动文件和配置文件的介绍。希望这份文档能帮助你更好地理解和使用这个开源项目。