Material Design 是 Google 推出的一种设计风格，其中包括了一套小而美的图标系统，让开发者能够快速而方便地将这些图标应用到他们的应用程序、网站以及其他交互类型的设计中。
Material Design 图标系统是一套高质量、现代化和易于使用的图标库，它基于 SVG（可伸缩矢量图形）技术，可在各种分辨率下呈现清晰、锐利的图像。
本篇文章将为初学者提供一份 Material Design 图标的使用指导，同时也会进行相应的封装，使得大家可以轻松地将这些图标嵌入到自己的项目当中。
Material Design 图标基础
Material Design 图标的核心在于其简洁、统一以及易于识别的形式，让您能够无缝地将这些图标应用到各种不同的用途中。这套图标系统被设计为一致、规范化和可定制的，并对图标的形状、大小、颜色都进行了充分的考虑。
Material Design 图标系统是 Google Design 组织的成果，包含了一大批基础型的、主题样式化的，以及应用符号样式、产品层次化以及其他针对开发者的可自定义样式的图标。 在 Material Icons 官方网站 上可以找到当前最全的 Material Design 图标库。
Material Design 图标的使用
在使用 Material Design 图标之前，我们需要将其引入项目中。
直接使用
您可以通过在 <head> 标签中添加以下链接，使用 Google CDN 引入 Material Design 图标库：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
现在，可以在任意地方使用像下面这样的 HTML 代码来引用任意图标：
<i class="material-icons">icon名称</i>
其中，icon 名称 代表 Material Design 图标库中的一个图标。例如：
<i class="material-icons">add_circle_outline</i>
这段代码将显示一个带边界的圆圈，里面带有一个加号，表示进行添加操作。
如果想要寻找某个具体的 Material Design 图标，请在官网中进行查找。
封装成组件
除了直接使用外，我们也可以将 Material Design 图标封装成组件，进一步简化我们的代码。
在 React.js 项目中，我们可以使用 @material-ui/icons 包，它是一款扩展 Material Icons 功能的 React 图标库。
首先，使用 npm 进行安装：
npm install @material-ui/core @material-ui/icons
现在，可以在任意 React 元素上使用像下面这样的代码来引用任意图标：
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
function MyComponent() {
return <AddCircleOutlineIcon />;
}Material Design 图标的自定义
一般情况下，在使用 Material Design 图标时，可以直接引入官网中的图标样式。但是，随着我们在项目中的需求越来越细化，图标的样式与功能也会不可避免地进行一些定制化。
针对这种情况，我们可以通过一些前端技术进行自定义，包括修改图标尺寸、修改图标颜色、添加动画等等。
修改图标尺寸
Material Design 图标的尺寸是可以进行自定义的。实际上，Material Icons 的尺寸分类为四种： 18px、24px、36px 和 48px。图片也有两个主要的形状： 圆形 和 方形。
可以将 Material Icons 的应用封装成一个组件，然后将尺寸参数作为其中的一个组件参数进行配置。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ---------- - ---- ---------------------------
------ ---- ---- -------------------------
----- --------- - ------------------ -- --
----- -
--------- ------- -- -----------
--
----
-------- ------------------- -
----- - ----- ---- - - ------
----- ------- - ----------- ---- ---
------ ----- ---------------------------------------
-
---------------------- - -
----- ----------------------------
----- -----------------
--
------------------------- - -
----- ---
--
------ ------- -------------例如：
-- -------------------- ---- -------
------ ------------ ---- -----------------
-------- ----- -
------ -
-----
------------- --------------- --------- --
------------- --------------- --------- --
------------- --------------- --------- --
------
--
-
使用上文中另一个开源 React 组件库 @material-ui/icons 也可以进行 size 的控制，使用方法与官方下载样式一样。
修改图标颜色
修改颜色的方法主要有以下两种：
- 直接改变 CSS
您可以通过 CSS 样式表直接为 <i> 标签指定颜色，从而改变图标的颜色：
.material-icons {
/* 设置icon颜色 */
color: #000;
}通过这种方法，可以为每一个图标指定不同的颜色。
- 改变 SVG 标签颜色
Material Design 图标是基于 SVG 技术实现的，因此，改变 SVG 标签的颜色也是一种在项目中常常采用的方法之一。
例如：
<svg color="#009688" viewBox="0 0 24 24"> ... </svg>
这段代码将把 svg 图标的颜色改为 #009688（material design 中的 teal）。
添加动画
在项目中，Material Design 图标还可以通过添加动画效果，进一步优化用户体验。
一般来说，CSS 的动画通常是基于 keyframes（关键帧）实现的。例如：
-- -------------------- ---- -------
---------- ---- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
-
-------------------- -
---------- ---- -- ------ ---------
-这段代码将为图标添加一个旋转的动画效果。
还可以使用 JavaScript 函数添加动态的动画效果：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- ---------------------------
------ ---- ---- -------------------------
----- --------- - ------------------ -- --
----- -
---------- -
---------- -----------------
----------- ---------- ----
--
--
----
-------- ------------------- -
----- - ---- - - ------
----- ------- - ------------
------ -
----- -------------------------
------
-------
--
-
------ ------- -------------通过这段代码，可以为图标添加一个鼠标悬浮时自动旋转的动画效果。
总结
本文主要介绍了在前端开发中如何使用 Material Design 图标，并提供了一些自定义样式和添加动画效果的方法。希望这篇文章对初学者有所帮助，如果有不足之处，欢迎指出。
示例代码：
以 React 项目为例，示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- ---------------------------
------ ---- ---- -------------------------
----- --------- - ------------------ -- --
----- -
------- -----------------
--------- ---
---------- -
---------- -----------------
----------- ---------- ----
--
--
----
-------- ------------------- -
----- - ---- - - ------
----- ------- - ------------
------ -
----- -------------------------
------
-------
--
-
-------- ----- -
----- ---------- - ----------
- ----- ---------- --
- ----- ---------------------- --
- ----- ----------------------- --
- ----- ---------- --
- ----- -------------- --
- ----- --------------------- --
---
------ -
--
-------------------- -- -
------------- ------------------------- ---------------- --
---
---
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c57e13d20074f47a471e7b