介绍
webpack-material-design-icons 是一个基于 Material Design 风格的图标库，它提供了很多常用的图标，并支持自定义颜色和大小。
此外，它还提供了一个方便的 npm 包，可以在项目中轻松使用这些图标。
本文将介绍如何安装和使用 webpack-material-design-icons。
安装
安装 webpack-material-design-icons 最简单的方式是通过 npm：
npm install webpack-material-design-icons
使用
引入样式
要使用 webpack-material-design-icons，首先需要引入样式文件：
import 'webpack-material-design-icons';
使用图标
在 HTML 中使用 webpack-material-design-icons 提供的图标非常简单，只需要在标签中添加相应的类名即可。
可以从 Webpack Material Design Icons 官网上查找需要使用的图标的类名。
例如，要使用一个名称为 home 的图标，可以这样写：
<i class="mdi mdi-home"></i>
自定义颜色和大小
webpack-material-design-icons 提供了两个类来支持自定义颜色和大小：
mdi-<color>mdi-<size>
可以将这些类名添加到标签上，从而实现自定义颜色和大小。
<!-- 自定义颜色 --> <i class="mdi mdi-home mdi-red"></i> <!-- 自定义大小 --> <i class="mdi mdi-home mdi-24px"></i>
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------------------------------ ----------
----- ---------------- ----------------------------------------------------------------------------------
-------
----- -
------------- -----
-
--------- -
------ ----
-
--------- -
---------- -----
-
--------
-------
------
--------------------------------- -------
-----
-- ----------- --- --------------
-- ----------- --- -----------------
-- ----------- --- ----------------
-- ----------- --- -------------
------
-----
-- ----------- --- -------- --------------
-- ----------- --- ----------- --------------
-- ----------- --- ---------- --------------
-- ----------- --- ------- --------------
------
-----
-- ----------- --- -------- --------------
-- ----------- --- ----------- --------------
-- ----------- --- ---------- --------------
-- ----------- --- ------- --------------
------
------- --------------------------
-------
-------import 'webpack-material-design-icons';
总结
本文介绍了如何使用 npm 包 webpack-material-design-icons，包括引入样式、使用图标和自定义颜色和大小等内容。希望能够帮助大家在前端开发中快速使用 Material Design 风格的图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd93