npm包@svgr/plugin-jsx使用教程

简介

在前端开发中，SVG图形已经成为工程中不可或缺的一部分。在众多的SVG解决方案中，@svgr/plugin-jsx是一个用于将SVG文件转换为React组件的npm包，它不依赖于任何其他的库，可以在React项目中方便地使用。本文将会详细阐述如何使用@svgr/plugin-jsx，以及一些示例。

安装

使用npm进行安装：

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

使用

配置

首先，需要在webpack或babel配置文件中添加一个loader，如下所示：

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

这里我们使用了file-loader和@svgr/webpack，并传入了一些选项。

其中，@svgr/webpack是将SVG转换为React组件的loader。

  • babel：设置是否使用babel转换，默认为true。
  • icon：设置是否使用svg-react-icon的结构生成组件，这里我们传入true。

转换SVG文件

接着，我们需要在React组件中使用这些SVG图形。我们可以将SVG文件导入到React组件中，如下所示：

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

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

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

在这里，我们使用了ReactComponent导入SVG组件，Logo就是SVG图形转换后的React组件。

不过要注意，我们在使用ReactComponent导入SVG时，需要使SVG图形的根元素是一个<svg>标签，并且必须添加xmlns="http://www.w3.org/2000/svg"属性。

这是因为SVG文件本身是XML格式，SVG规范中规定了需要添加xmlns属性，否则将无法被识别为SVG文件。

使用选项

在使用@svgr/plugin-jsx时，我们还可以传递一些选项。本文只介绍一下最基础的一些选项：

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

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

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

其中，我们添加了一个选项template，用于自定义组件的结构。

在默认情况下，@svgr/plugin-jsx将SVG图形转换为React组件的结构是这样的：

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

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

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

而我们在template选项中使用的函数是对这个默认结构的自定义，将生成的组件改为以下形式：

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

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

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

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

通过自定义组件结构，我们可以方便地添加默认props，与项目中的图标组件风格保持一致。

示例

这里提供一个基于webpack的React项目中，如何使用@svgr/plugin-jsx的示例：

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

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

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

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

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

使用方法与普通的React组件导入相似，使用了自定义模板可以方便地添加默认props。

总结

本文详细介绍了如何使用@svgr/plugin-jsx将SVG图形转换为React组件，以及如何自定义组件结构和默认props。这是一个十分实用的npm包，可以方便地在React项目中使用SVG图形。尤其是在需要制作一些与项目样式和主题保持一致的自定义图标时，@svgr/plugin-jsx的优势尤为明显。

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

阅读全文

猜你喜欢

  • npm 包 x-select 使用教程

    介绍 在前端开发中，经常需要开发一些表单界面，特别是一些需要选择的数据项，在实现多选、单选、级联选择等操作时，我们需要一个可以快速实现这些功能的组件库。针对这个需求，我们可以选择 npm 包中的 x-...

    5 年前
  • npm 包 x-templates 使用教程

    什么是 x-templates？ x-templates 是一个基于 Node.js 的 npm 包，它是一个简单、命令行友好的 HTML 模板引擎。它可以在 Node.js 应用程序中轻松地创建 H...

    5 年前
  • npm 包 farmhash 使用教程

    在前端开发中，我们经常需要对数据进行哈希处理，以实现快速的数据查询和比对。此时，farmhash 可以成为我们的一个好选择，它是一个快速的哈希函数库，提供了比较好的哈希算法，我们可以通过 npm 安装...

    5 年前
  • npm 包 zrx 使用教程

    前端开发中，我们经常会用到各种 npm 包来提高开发效率。zrx 包是一个非常实用的工具，可以帮助我们快速生成 React 代码，并且可以自定义生成的代码模板。本篇文章将详细介绍 zrx 的使用方法，...

    5 年前
  • npm 包 revolt-json-parser 使用教程

    简介 revolt-json-parser 是一个用于解析 JSON 数据的 npm 包，能够将 JSON 字符串解析成为 JavaScript 对象。它支持解析 JSON5 和 JSONC 格式的数...

    5 年前
  • npm 包 json-stream 使用教程

    在前端开发中，我们经常需要处理 JSON 数据流。而 npm 包 json-stream 可以非常方便地帮助我们实现 JSON 数据流的解析和操作。本文将为大家介绍 npm 包 json-stream...

    5 年前
  • npm 包 caql-js-compiler 使用教程

    概述 npm 包 caql-js-compiler 是一个将 CAQL（简单查询语言）转换为 JavaScript 代码的编译器。 在前端开发中，开发人员需要处理和操作大量的数据。

    5 年前
  • npm包calypso-query-decompiler使用教程

    在前端开发中，使用npm包是常见的做法，它可以提供更好的工作效率和代码可读性。今天，我们将学习解压calypso-query-decompiler npm包的使用方法。

    5 年前
  • npm 包 calypso-level 使用教程

    在前端开发中，我们经常会使用 npm 包来管理和引用模块。其中，calypso-level 是一个非常实用的 npm 包，它可以帮助我们更方便地操作和管理浏览器端的 IndexedDB 数据库。

    5 年前
  • npm 包 calypso 使用教程

    前言 Calypso 是一个通过 React 构建的现代化的 WordPress 管理套件，包含有丰富的功能和特性，集成了许多工具和插件，可以极大地提升 WordPress 站点的管理和运营效率。

    5 年前
  • npm 包 api-media-type 使用教程

    什么是 api-media-type api-media-type 是一个 npm 包，它能够帮助我们解析 HTTP 头中的 Media Type。Media Type 又称为 MIME Type（M...

    5 年前
  • npm 包 zetta-cloud 使用教程

    zetta-cloud 是一个基于 Node.js 的前端开发框架，该框架可以帮助开发者在少量的代码中部署出一个连接物联网设备和 Web 应用的连接。在本篇文章中，我们将会深入学习该 npm 包的功能...

    5 年前
  • npm 包 argo-url-helper 使用教程

    介绍 argo-url-helper 是一个方便的 JavaScript 库，提供了一些方法来处理和操作 URL，如添加参数、从 URL 中获取参数等等。使用该库可以避免手写复杂的正则表达式或字符串操...

    5 年前
  • npm 包 argo-clf 使用教程

    在前端开发的过程中，我们经常会使用各种工具来简化我们的工作流程，其中一个非常实用的工具就是 argo-clf。它是一个 npm 包，用于解析和生成 Common Log Format（CLF）。

    5 年前
  • npm 包 medea 使用教程

    前言 Medea 是一款可以帮助前端开发人员在浏览器中高效地展示流媒体文件的 npm 包。本文将详细介绍 medea 的使用方法，包括 medea 的安装、功能特性、API 和示例代码等内容。

    5 年前
  • npm 包 @oclif/tslint 使用教程

    前言 在前端开发的过程中，我们经常会使用到一些代码规范工具，如 tslint，来保证代码的风格一致，不仅有助于代码的阅读和维护，还能提高开发效率。在本篇文章中，我们将介绍一款名为 @oclif/tsl...

    5 年前
  • npm 包 @oclif/plugin-plugins 使用教程

    前言 在进行前端开发时，我们经常需要使用各种的 npm 包来完成不同的任务。而 @oclif/plugin-plugins 是一个非常实用的 npm 包，可以帮助我们更好地管理和使用其他的 npm 插...

    5 年前
  • npm 包 @oclif/parser 使用教程

    简介 @oclif/parser 是一个命令行解析器，用于解析命令行输入参数。它是一个独立的 npm 包，由 Heroku 的开源团队开发，现在已成为一个受欢迎的解析器。

    5 年前
  • npm 包 @oclif/errors 使用教程

    前言 在前端开发中，我们需要经常处理错误信息。而 npm 上的 @oclif/errors package 提供了一种简单有效的处理错误信息的方式。在本文中，我们将介绍如何使用 @oclif/erro...

    5 年前
  • npm包 @jvmn/upload-rsync使用教程

    本教程将介绍npm包@jvmn/upload-rsync的使用方法。该包是用于将文件上传到远程服务器的工具。它可以通过rsync协议安全地传输文件，并且可以进行增量上传，提高上传效率。

    5 年前

相关推荐

    暂无文章