npm 包 chin-plugin-svgr 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

NPM 是 Node.js 的包管理器，提供了丰富的第三方包供开发者使用和分享。chin-plugin-svgr 是一个基于 SVGR 的 NPM 包，旨在将 SVG 图标文件转化成可直接在 React 组件中使用的 JSX 代码。本文将介绍如何安装和使用 chin-plugin-svgr。

安装

你可以通过以下命令在你的项目中安装 chin-plugin-svgr：

npm install chin-plugin-svgr --save-dev

使用

配置 webpack

首先在项目中安装 @svgr/webpack 模块：
```
npm install @svgr/webpack --save-dev
```

然后在 webpack 配置文件中添加以下 loader：

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

在 React 组件中使用 SVG 图标

首先将 SVG 文件放置在项目的 src/assets/icons 目录下。

创建一个 Icon.js 文件，用于导出 SVG 图标：

import React from 'react'
import { ReactComponent as Icon } from 'assets/icons/icon.svg'

const SvgIcon = () => {
  return <Icon />
}

export default SvgIcon

在需要使用 SVG 图标的组件中引入 Icon.js 并渲染：

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

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

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

示例代码

webpack.config.js:

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

Icon.js:

import React from 'react'
import { ReactComponent as Icon } from 'assets/icons/icon.svg'

const SvgIcon = () => {
  return <Icon />
}

export default SvgIcon

App.js:

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

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

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

总结

通过使用 chin-plugin-svgr，我们可以将 SVG 图标文件转成 React 组件可用的 JSX 代码，使得在项目中使用 SVG 图标变得更加方便和简单。本文介绍了 chin-plugin-svgr 的安装和使用方法，希望能为前端开发者提供一些指导和帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f70238a385564ab66db