随着前端技术的快速发展，现如今越来越多的网站都采用了 SVG 图标来优化页面的性能，并且让图标的样式更加灵活多变。而 react-svg-components-generator 是一个 npm 包，能够将 SVG 图标自动转化为 React 组件，让我们在开发时更加方便快捷。
安装 react-svg-components-generator
使用 npm 安装 react-svg-components-generator：
npm install react-svg-components-generator
使用 react-svg-components-generator
在运行 react-svg-components-generator 前，需要先将 SVG 图标存放在一个文件夹内。比如我们将所有的 SVG 图标存放在 src/icons 文件夹下。然后就可以使用以下命令将 SVG 图标自动转化为 React 组件：
npx react-svg-components-generator -i path/to/svg/folder -o path/to/export/components/folder
其中：
- -i：指定 SVG 图标文件夹的路径；
- -o：指定导出 React 组件的路径。
运行完后，会在指定的输出路径下生成 .js 和 .jsx 文件，这些文件就是转化过的 React 组件。
实例代码
以下是一个示例代码，在 src/icons 文件夹内存放两个 SVG 图标，分别为 icon1.svg 和 icon2.svg。然后使用 react-svg-components-generator 将这些 SVG 图标转化为 React 组件，并在 App.js 中使用它们。
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - ------ ----- - ---- ----------
-------- ----- -
------ -
-----
------ ------------ ------------- --
------ ------------ ------------- --
------
--
-
------ ------- ----总结
使用 react-svg-components-generator，我们可以自动将 SVG 图标转化为 React 组件，提高开发效率。同时，我们可以使用这些组件自由地创建出不同样式的图标，以及进行动画等操作，更好地展示我们的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd981e8991b448e680f