关于vite:unpluginsvgcomponent-助你优雅的使用-svg-图标

前言

现如今, 我的项目中的小图标往往会应用 svg 的形式来做, 许多 svg 插件供咱们抉择, 比如说 vite-plugin-svg-icons, 这个插件的应用的范畴是比拟广的, 然而就我应用下来而言, 发现几个痛点:

1. 应用该插件之后必须要本人在新建一个 svg 的 (vue/react) 组件, 这有些繁琐了;
2. ts 反对无限, 我冀望的是在应用组件的时候可能智能提醒所有的 icon 图标的名字;
3. 不反对 tree-shaking , 未应用的图标仍然会打包到最终的产物中;
4. 不反对 svg 图标的 hmr, 每次新增 / 删除图标都须要重启服务;
5. 有色图标的应用问题。

而且, 仿佛这个仓库曾经不再保护了。

unplugin-svg-component

因而, 基于以上几个痛点, 我便鼓捣出 unplugin-svg-component, 我的项目应用 Anthony Fu 大佬的 unplugin 我的项目模板, 因而反对 vite, webpack, rollup, esbuild 等多个打包工具, 目前插件次要针对几个痛点做了以下性能:

1. 依据我的项目类型 vue/react, 主动生成对应的组件(这里的原理是检测我的项目中的 dependencies 是否蕴含 vue/react, 这可能不精确, 所以也反对手动配置);
2. 会生成 svg-component.d.ts 文件, 用于组件应用过程中提醒 svg 的名称, 你只须要把 svg-component.d.ts 引入到你的 tsconfig.json 当中;
3. 在生产环境下, 会扫描你应用过的 svg 图标, 把未应用到的图标从你的最终产物中剔除;
4. 目前反对在 Vite 的开发环境的 HMR, 其它工具会后续反对;
5. 有色图标能够通过配置 preserveColor 来决定哪些 svg 图标须要保留其色彩。

效果图

Vue

React

结语

这个我的项目是我开源的第一个作品, 没有宣传, 也陆陆续续有人 star, 这让我有了坚持下去的能源, 如果有同学有 svg 图标应用这方面的需要, 无妨试试这个插件, 心愿能帮忙到你, 也欢送各位同学给我提 issue 和 PR, 收!