什么是 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 组件并引入所需的图标：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------------------
------ - ------ ----------- ------ - ---- ---------------------------------
-------- ----- -
------ -
--
----- ------------ --
----- ----------------- --
----- ------------- --
---
--
-
------ ------- ----上述示例代码中，我们使用了 MdAdd、MdCheckBox、MdEdit 三个图标，并通过 Icon 组件渲染出来。使用 icon 属性指定图标即可。
进阶用法
大小和颜色
可以使用 color 和 size 属性来控制图标的颜色和大小：
<Icon icon={MdAdd} color="red" size={24} />配合其他样式库使用
material-svg-react-icons 可以配合其他样式库使用，比如经典的 Font Awesome：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------------------
------ - ----------- --------- - ---- -----------------
-------- ----- -
------ -
--
----- ----------------- --
----- ---------------- --
---
--
-
------ ------- ----上述示例代码中，我们使用了 FaFacebook、FaTwitter 两个 Font Awesome 图标，并通过 Icon 组件渲染出来。
图标类型
material-svg-react-icons 提供了两种类型的图标：单个的图标和一系列相关的图标。
单个的图标
单个的图标只包含一个图标元素，使用时直接指定即可。比如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---- - ---- --------------------------- ------ - --------- - ---- --------------------------------- -------- ----- - ------ ----- ---------------- --- - ------ ------- ----
上述示例代码中，我们使用了 AiFillApi 单个图标。
一系列相关的图标
一系列相关的图标是一组同一主题，同一类型的图标，使用时可以通过不同的图标属性进行配置。如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------------------
------ - ------------------------- ---------------------- - ---- ---------------------------------
-------- ----- -
------ -
--
----- ----------- ---------------------------- --
----- ----------- -------------------------- --
---
--
-
------ ------- ----上述示例代码中，我们使用了一系列和 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 组件即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------------------
------ - ------------------------- ---------------------- - ---- ---------------------------------
------ --------------------
-------- ----- -
------ -
--
----- ----------- ---------------------------- --
----- ----------- -------------------------- --
----- --------------- ------------- --
---
--
-
------ ------- ----上述示例代码中，我们还使用了 ./themes/my-theme.js 自定义文件中的 GitHub 组件。
总结
以上就是 material-svg-react-icons 的使用教程。通过本文的学习，读者可以了解到 material-svg-react-icons 的基本用法、进阶用法、图标类型以及自定义主题等内容，希望能对读者在前端开发中使用图标提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673ddfb81d47349e53b2f