前言
在前端开发中，我们经常会使用 SVG 图标，不仅可以优化页面渲染速度，还可以保证图片的清晰度。而在使用 SVG 图标时，通常会将 SVG 文件转换成 JSX 或 React 组件的形式，这样方便在代码中进行复用和管理。这时候就需要用到一个 npm 包 @svgr/plugin-prettier，它可以将 SVG 文件转换为 React 组件，并且可以自动美化格式。
本文将介绍如何使用 @svgr/plugin-prettier 包，包括安装，转换 SVG 文件为 React 组件，美化代码等。
安装
可以使用 npm 或者 yarn 进行安装：
npm install --save-dev @svgr/plugin-prettier
yarn add -D @svgr/plugin-prettier
转换 SVG 文件为 React 组件
使用 @svgr/plugin-prettier 包将 SVG 文件转换为 React 组件非常简单，只需在命令行中输入以下命令：
npx @svgr/cli --icon --no-view-box --out-dir ./src/icons ./src/assets/icons/*.svg
该命令会将 ./src/assets/icons 目录下的所有 SVG 文件转换为 React 组件，并保存到 ./src/icons 目录下。
--icon表示生成的 React 组件为 icon 组件，如果是 button 组件，则可以使用--template参数；--no-view-box表示生成的 React 组件不带 viewBox 属性；--out-dir表示生成的 React 组件的输出目录；./src/assets/icons/*.svg表示要转换的 SVG 文件路径。
美化代码
@svgr/plugin-prettier 包还可以自动美化生成的代码。只需在命令行中加上 --prettier 参数即可：
npx @svgr/cli --icon --no-view-box --out-dir ./src/icons --prettier ./src/assets/icons/*.svg
该命令会生成格式美化后的 React 组件。
示例代码
下面是一个示例代码，将名为 example.svg 的 SVG 文件转换成 React 组件：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - -------- - ---- ------------
------ ---------- ---- -------------------
-------- -------------- -
------ -
---------
---------------------- -- -
------------------------- -----------------------------
--
----------------
----------
--
--
-
------ ------- --------该 React 组件中使用 ReactSVG 组件，将 SVG 文件渲染为页面中的图标。在渲染前，可以使用 beforeInjection 属性设置样式等。这里设置了宽度和高度。
总结
@svgr/plugin-prettier 包可以帮助我们将 SVG 文件转换成 React 组件，并且可以自动美化代码。其使用非常方便，只需要在命令行中输入对应的命令即可。对于前端开发者来说，这个包非常实用，可以提高开发效率，也让代码更易于管理。
希望本文对于初学者有一定的帮助，如果有不懂的地方，可以参考官方文档，也可以在评论区留言，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/svgr-plugin-prettier