npm 包 @svgr/cli 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 @svgr/cli 使用教程

什么是 @svgr/cli

@svgr/cli 是一个可以将 SVG 图像转换为 React 组件的 npm 包。它的转换精确且支持几乎所有的 SVG 规范。转换后的 React 组件还可以轻松地进行定制和扩展使用。

安装 @svgr/cli

在安装 @svgr/cli 之前，你需要先确认 npm 或 yarn 已经安装在你的电脑上。

安装 npm 包

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

安装 yarn 包

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

使用 @svgr/cli

@svgr/cli 支持从一个或多个 SVG 文件（.svg）转换为 React 组件（.js 或 .jsx）。下面是使用 @svgr/cli 的简单方法：

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

在上述命令中，我们将 helloworld.svg 转换为 HelloWorld.js。你也可以指定一个目录来转换多个 SVG 文件。例如：

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

在上述命令中，我们将 src/icons 目录中的所有 SVG 文件转换为 TypeScript 类型的 React 组件，并且将它们保存在 src/components/icons 目录。

除了简单的转换之外，@svgr/cli 还支持一系列可选参数来控制输出的 React 组件的格式和代码风格。

@svgr/cli 可选参数

--config（-c）

使用指定的配置文件处理 SVG 文件。该配置文件可以包含以下字段：

icon: boolean

是否将 SVG 文件转换为 React 图标组件。

默认值：false
native: boolean

是否将 SVG 文件转换为原生 React 组件。

默认值：false
dimensions: boolean

是否为 React 中的 SVG 组件保留原始宽度和高度。

默认值：false
replaceAttrValues: object

一个键值对对象，用于指定要替换的 SVG 属性值。键名为要替换的属性名，键值为用于替换属性值的字符串或函数。

默认值：{}
svgProps: object

一个键值对对象，用于设置 SVG 组件的属性。键名为要设置的属性名，键值为属性值。

默认值：{}
titleProp: boolean

是否将 SVG 文件中的 <title> 元素的内容转换为 React 属性。

默认值：true
ref: string

指定生成 React 组件的 ref 名称。

默认值：null
template: string

指定一个自定义代码模板文件用于生成 React 组件。

默认值：.svgrrc.js 文件中的 template 字段。
plugins: array

一个存放配置项的数组。

默认值：.svgrrc.js 文件中的 plugins 字段。

--icon

将 SVG 文件转换为 React 图标组件。

--native

将 SVG 文件转换为原生 React 组件。

--dimensions

为 React 中的 SVG 组件保留原始宽度和高度。

--replaceAttrValues

一个键值对对象，用于指定要替换的 SVG 属性值。键名为要替换的属性名，键值为用于替换属性值的字符串或函数。

--svgProps

一个键值对对象，用于设置 SVG 组件的属性。键名为要设置的属性名，键值为属性值。

--titleProp

是否将 SVG 文件中的 <title> 元素的内容转换为 React 属性。

--ref

指定生成 React 组件的 ref 名称。

--template

指定一个自定义代码模板文件用于生成 React 组件。

--plugins

一个存放配置项的数组。

示例代码

以下是一个使用 @svgr/cli 将 SVG 文件转换为 React 组件的示例代码：

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

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

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

在上述代码中，我们首先导入了从 ./logo.svg 文件自动生成的 React 组件 Logo，然后将其用作 App 组件中的一部分。

总结

本文介绍了 @svgr/cli 库的基本用法和可选参数。通过使用它，你可以将 SVG 文件转换为 React 组件，并使用生成的 React 组件定制和扩展你的应用程序。无论你是个新手还是一个经验丰富的前端开发者，@svgr/cli 都值得一试。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/148141