npm 包 @svgr/cli 使用教程

阅读时长 5 分钟读完

什么是 @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

相关推荐
精选内容