svg： 1 篇

前言#

在项目开发中，跟 svg 打交道可以说必不可少，想对比 png，svg 更可控，还能改变 svg 的样式，体积也会小很多，也相当于一种性能优化。下面看看 React 中使用 svg 的姿势。

svg 它是一种向量图的图片格式，即可伸缩向量图（Scalable Vetor Graphics）。在构建前端应用时经常使用一些图标，相对应我们会比较偏向于使用 svg，那么 svg 有什么好处呢，接下来会说到，这篇文章主要围绕在 React 中如何通过组件的方式使用 svg。

首先看看在项目中使用 svg 有什么好处？

• 压缩后的文件体积小
• 可以无损伸缩到任意尺寸（特别小的尺寸，需要一些 css 特性来解决），放大不会失真
• 设计可控，比如交互和滤镜

那么下面会说说 React 开发中，如何组件化使用 SVG 的，会讲的实现方式有两种 ：

• 通过插件 webpack-iconfont-plugin-nodejs + 封装 Icon 组件实现；
• Vite 构建下使用 vite-plugin-svgr 插件 直接导入实现；