npm 包 material-svg-react-icons 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 material-svg-react-icons？

material-svg-react-icons 是一个基于 React 的开源图标库，提供了 Google Material Design 等各种主题的高质量 SVG 图标，可以帮助开发者快速实现各种图标的使用和定制。material-svg-react-icons 提供了两种类型的图标：单个的图标和一系列相关的图标。

material-svg-react-icons 的安装和使用

安装

使用 npm 命令安装 material-svg-react-icons，命令如下：

npm install --save material-svg-react-icons

基本用法

material-svg-react-icons 提供了各种主题、各种类型的图标。在使用时需要先导入 Icon 组件并引入所需的图标：

import React from 'react';
import { Icon } from 'material-svg-react-icons';
import { MdAdd, MdCheckBox, MdEdit } from 'material-svg-react-icons/icons';

function App() {
  return (
    <>
      <Icon icon={MdAdd} />
      <Icon icon={MdCheckBox} />
      <Icon icon={MdEdit} />
    </>
  );
}

export default App;

上述示例代码中，我们使用了 MdAdd、MdCheckBox、MdEdit 三个图标，并通过 Icon 组件渲染出来。使用 icon 属性指定图标即可。

进阶用法

大小和颜色

可以使用 color 和 size 属性来控制图标的颜色和大小：

<Icon icon={MdAdd} color="red" size={24} />

配合其他样式库使用

material-svg-react-icons 可以配合其他样式库使用，比如经典的 Font Awesome：

import React from 'react';
import { Icon } from 'material-svg-react-icons';
import { FaFacebook, FaTwitter } from 'react-icons/fa';

function App() {
  return (
    <>
      <Icon icon={FaFacebook} />
      <Icon icon={FaTwitter} />
    </>
  );
}

export default App;

上述示例代码中，我们使用了 FaFacebook、FaTwitter 两个 Font Awesome 图标，并通过 Icon 组件渲染出来。

图标类型

material-svg-react-icons 提供了两种类型的图标：单个的图标和一系列相关的图标。

单个的图标

单个的图标只包含一个图标元素，使用时直接指定即可。比如：

import React from 'react';
import { Icon } from 'material-svg-react-icons';
import { AiFillApi } from 'material-svg-react-icons/icons';

function App() {
  return <Icon icon={AiFillApi} />;
}

export default App;

上述示例代码中，我们使用了 AiFillApi 单个图标。

一系列相关的图标

一系列相关的图标是一组同一主题，同一类型的图标，使用时可以通过不同的图标属性进行配置。如下所示：

import React from 'react';
import { Icon } from 'material-svg-react-icons';
import { IoIosArrowDropdownCircle, IoIosArrowDropupCircle } from 'material-svg-react-icons/icons';

function App() {
  return (
    <>
      <Icon family="Io" name="arrow-dropdown-circle" />
      <Icon family="Io" name="arrow-dropup-circle" />
    </>
  );
}

export default App;

上述示例代码中，我们使用了一系列和 Io 主题相关的图标，通过 family 和 name 属性进行指定。其中 IoIosArrowDropdownCircle 对应的是 family="Io"、name="arrow-dropdown-circle"。

自定义主题

material-svg-react-icons 提供了自定义主题的功能，通过配置自定义主题，可以方便快捷地使用自己的图标。具体操作如下：

定义自己的 SVG 图标

定义自己的 SVG 图标，放在某个目录下。

比如，我们定义了自己的 SVG 图标在 ./icons 目录下：

./icons/github.svg

下面是自定义的 github.svg 文件的代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path
  d="M12 0a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.3-1.2-1.6-1.2-1.6-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.3 1.2 2.9.9a2 2 0 01.6-1.3c-2.1-.2-4.3-1-4.3-4.6 0-1 .4-1.9 1-2.6a3.4
  3.4 0 01.1-2.5s.8-.3 2.6 1a9.3 9.3 0 014.9 0c1.8-1.3 2.6-1 2.6-1 .5 1.6.2 2.8.1 3a3.4 3.4 0 01.1 2.5c.6.7 1 1.6 1 2.6 0 3.6-2.2 4.4-4.3 4.6.3.3.8.8.8 1.9v2.8c0 .3.2.7.8.6A12 12 0 0012 0"
  />
</svg>

配置自定义主题

在 material-svg-react-icons 的配置文件中，添加自定义主题，并指定所用的 SVG 图标。

比如，我们在 ./themes 目录下创建名为 my-theme.js 的文件，并添加如下代码：

import { Icon } from 'material-svg-react-icons';

Icon.add({
  name: 'GitHub',
  viewBox: '0 0 24 24',
  svg: require('../icons/github.svg').default,
});

然后在使用自定义 SVG 图标时，直接用新定义的 GitHub 组件即可：

import React from 'react';
import { Icon } from 'material-svg-react-icons';
import { IoIosArrowDropdownCircle, IoIosArrowDropupCircle } from 'material-svg-react-icons/icons';
import './themes/my-theme';

function App() {
  return (
    <>
      <Icon family="Io" name="arrow-dropdown-circle" />
      <Icon family="Io" name="arrow-dropup-circle" />
      <Icon family="GitHub" name="GitHub" />
    </>
  );
}

export default App;

上述示例代码中，我们还使用了 ./themes/my-theme.js 自定义文件中的 GitHub 组件。

总结

以上就是 material-svg-react-icons 的使用教程。通过本文的学习，读者可以了解到 material-svg-react-icons 的基本用法、进阶用法、图标类型以及自定义主题等内容，希望能对读者在前端开发中使用图标提供帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673ddfb81d47349e53b2f

npm 包 material-svg-react-icons 使用教程