文章主要讨论前端工程化、模块化开发时使用svg图标的一点个人经验吧，第一次写文章不足之处在所难免，欢迎指正。
因为平时开发中主要使用Vite，所以就以Vite生态中相关的插件来分享一下。
通常会将所有的作为图标来使用的svg文件放在src/assets/icons下面，然后借助vite-plugin-svg-icons 这个vite插件将icons目录下的所有svg文件打包到一个dom结构里作为一张精灵图备用。然后在需要使用图标的地方直接借助svg中的use标签来引入精灵图中的图标。
插件生成的dom如下：
可以看到插件将目录下每一个svg文件都作为symbol挂载在dom上，使用的时候直接通过下面的方式指向对应的symbol就可以了。(symbol、use这两个标签是svg本身就支持的，插件只是帮你省去了手动书写symbol的麻烦）
<svg>
<use xlink:href="#icon-menu"></use>
</svg>
下面我们再来看svg图标的一个优势
通过将svg原始代码中的fill、stroke等涉及到颜色的属性的属性值修改为currentColor即可让这些属性的颜色使用当前上下文的颜色，通常来说就是当前的color属性的值。这样我们只需要在css相关的样式(:hover .active 等等)中修改color的颜色就能改变图标的颜色,非常方便。（这种方式通常适用于纯色图标上，多色图标也可以不过需要额外的css处理）。
将svg的width、height等属性设置为1em可以让图标大小根据当前上下文的font-size属性值自动变化。
