前言现在项目中的小图标往往都是以svg的形式制作出来的，也有很多svg插件可供我们选择，比如vite-plugin-svg-icons，这个插件的使用范围比较广，但是就我使用来说，我发现了几个痛点：使用这个插件之后，必须自己新建一个svg（vue/react）组件，这有点麻烦；tssupportLimited，我期望的是在使用组件时能够智能提示所有图标的名称；不支持tree-shaking，未使用的图标仍会打包到最终产品中；不支持svg图标的hmr，每次新增/删除图标都需要重启服务；使用彩色图标存在问题。此外，似乎不再维护此存储库。unplugin-svg-component因此，基于以上痛点，我鼓捣了unplugin-svg-component。该项目使用了AnthonyFu的unplugin项目模板，因此支持vite、webpack、rollup、esbuild等打包工具。目前该插件针对几个痛点主要做了以下功能：根据项目类型vue/react，自动生成对应的组件（这里的原理是检测项目中的依赖是否包含vue/react，可能不准确，也支持手动配置）;会生成svg-component.d.ts文件，用于组件使用时提示svg名称，只需要importsvg-component.d.ts进入你的tsconfig.json；在生产环境中，它会扫描你使用过的svg图标，从你的最终产品中移除未使用的图标；目前在Vite的开发环境中支持HMR，后续会支持其他工具；彩色图标可以配置为preserveColor以确定哪些svg图标需要保留其颜色。效果图VueReact结语这个项目是我的第一个开源作品。没有宣传，人家一个接一个地出演。这给了我坚持下去的动力。如果有同学在这方面有使用svg图标的需求，不妨试一试希望这个插件能帮到你，也欢迎各位同学给我提issue和PR，采纳！
