npm 包 @svgr/babel-plugin-transform-svg-component 使用教程

导语

在前端开发领域，SVG (Scalable Vector Graphics) 被广泛使用，在实现图形化页面元素时，SVG 拥有丰富的优势。但是，SVG 文件通常在处理、维护和缩放时都会遇到困难，为此，@svgr/babel-plugin-transform-svg-component 应运而生。该 npm 包可以将 SVG 文件转化为可重用的 React 组件，方便我们在 React 项目中进行使用。

安装

在使用 @svgr/babel-plugin-transform-svg-component 之前，需要先将其安装到项目依赖中。我们可以通过 npm 或者 yarn 安装，方法如下：

# 使用 npm
npm install --save-dev @svgr/babel-plugin-transform-svg-component

# 使用 yarn
yarn add --D @svgr/babel-plugin-transform-svg-component

配置

在安装完 @svgr/babel-plugin-transform-svg-component 之后，我们需要将其配置到项目的 babel 配置文件中。首先，需要先安装并配置 babel-plugin-import，它能够动态导入 SVG 文件。

# 使用 npm
npm install --save-dev babel-plugin-import

# 使用 yarn
yarn add --D babel-plugin-import

然后，在 .babelrc 或者 babel.config.js 文件中添加如下配置：

{
  "plugins": [
    ["import", {"libraryName": "@svgr/webpack", "libraryDirectory": "src/components"}],
    "babel-plugin-inline-react-svg",
    "@svgr/babel-plugin-transform-svg-component"
  ]
}

这里的 babel-plugin-inline-react-svg 是将 SVG 转化为 React 组件的关键插件。

使用示例

安装和配置完成后，我们就可以愉快地在 React 项目中使用 SVG 文件了。假设我们有一个名为 logo.svg 的 SVG 文件，将其转化为 React 组件的方法如下：

-- -------------------- ---- -------
------ ---- ---- -------------

-------- ----- -
  ------ -
    -----
      ----- --
    ------
  --
-

------ ------- ----

最终，我们将会看到一个展示 SVG 的页面，并且在代码中可以愉快地使用 SVG 所有属性。

拓展

如果需要自定义 SVG 的导出设定，还可以使用 @svgr/core 包进行配置。@svgr/core 包允许我们自定 SVG 的代码输出内容，使其便捷地添加到项目中。

结语

通过此教程，我们学习了如何安装、配置和使用 @svgr/babel-plugin-transform-svg-component，以及如何将 SVG 转化为可重用的 React 组件。此外，我们还了解到了一些拓展的内容和相关的使用注意点。相信本教程可以对前端开发中使用 SVG 产生帮助，希望大家可以通过此组件轻松实现图形化元素。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/svgr-babel-plugin-transforms-svg-component