简介
svgr 是一个将 SVG 转换为 React 组件的工具，它可以让你在 React 项目中以组件的形式使用 SVG 图标，从而提高代码的可读性和可维护性。
安装
使用 npm 安装 svgr：
npm install --save-dev @svgr/cli
使用方法
将 SVG 文件转换为 React 组件：
npx svgr --template=your-template-file.svg your-svg-file.svg --out-dir=your-output-directory
其中
--template参数表示指定模板文件，--out-dir参数表示指定输出目录。在 React 项目中引用生成的组件：
-- -------------------- ---- ------- ------ ---- ---- ----------------- -------- ------------- - ------ - ----- ----- ---------- ----------- -- ------ -- -
展开代码注意：生成的组件默认是使用 ES6 模块化语法导出的，如果你需要使用 CommonJS 规范，可以通过添加
--ext=.js参数来解决。
高级用法
自定义模板
svgr 支持自定义模板功能，用户可以根据自己的需求编写模板文件。例如，下面是一个简单的模板文件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- -------- -------------- - ----- - ---------- ------- - - ------ ------ - ---- -------------------- -------------- ---------- - -- --- ---------- ----- ----------- ----- ----------- -- --- --- ---- -------- --- ------ -- -展开代码
在使用时，可以通过 --template=your-template-file.js 参数指定模板文件。
配置选项
svgr 支持一些配置选项，用户可以在 svgr.config.js 文件中设置。例如，下面是一个简单的配置文件：
module.exports = { jsx: { babelConfig: { presets: ['@babel/preset-react'], }, }, };
这个配置文件表示将转换后的组件使用 React 的 JSX 语法，并且使用 @babel/preset-react 作为 Babel 配置。
插件扩展
svgr 还支持插件扩展功能，用户可以根据自己的需求编写插件。例如，下面是一个简单的插件文件：
-- -------------------- ---- ------- -------------- - -------- ---------- - ------ - -------- - ---------------- - -- -- ---------- -- -- -- -- --展开代码
在使用时，可以通过 --svgo-config={ "plugins": [{ "myPlugin": true }] } 参数来使用插件。这个参数表示启用名为 myPlugin 的插件。
示例代码
假设有一个名为 icon.svg 的 SVG 图标文件，我们可以使用以下命令将它转换为 React 组件：
npx svgr --template=your-template-file.svg icon.svg --out-dir=src/components
然后，在 React 项目中引用生成的组件：
-- -------------------- ---- ------- ------ ---- ---- -------------------- -------- ------------- - ------ - ----- ----- ---------- ----------- -- ------ -- -展开代码
总结
svgr 是一个非常有用的工具，它可以让我们以组件的形式使用 SVG 图标。通过本文的介绍，相信读者已经学会了 svgr 的基本用法，并且能够根据自己的需求进行高级用法和插件扩展。在实际开发过程中，我们可以将 svgr 进一步应用到项目中，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47460
