前言
在前端开发中，很多时候需要使用图标来装饰页面或者作为操作按钮，本文将介绍使用 npm 包 @mdi/js 来获取 Material Design 图标的方法。
什么是 @mdi/js 包？
@mdi/js 是 Material Design 图标的 JavaScript 版本。它为开发者提供了一种简单的方法来集成 Material Design 图标到他们的 Web 应用程序中。
如何使用 @mdi/js 包？
- 安装 @mdi/js
打开终端，并运行以下命令来安装 @mdi/js 包：
npm install @mdi/js
- 使用 @mdi/js
通过以下方式来引用 @mdi/js：
import { mdiHome } from '@mdi/js';然后，可以将此图标用作 HTML 的内容：
<i class="material-icons">{mdiHome}</i>此时，你就可以在你应用的页面上看到一个 Material Design 的“Home”图标了。
注意：mdiHome 仅是一个绑定到具体图标的变量名，而不是一个直接可显示的图标。
- 颜色和大小
@mdi/js 可以为所有 Material Design 图标设置颜色和大小。你可以使用以下方式来设置：
<i style="font-size:24px; color:red">{mdiHome}</i>示例代码
下面是一些示例代码，可用于在你的 Web 应用程序中集成 Material Design 图标：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- -------- ---------- - ---- ----------
----- ----------- - -- -- -
-----
-- -------- --------- --- ------ ------ ----------------
-- -------- --------- --- ------ ----- ----------------
-- -------- --------- --- ------ ------- -------------------
------
--
------ ------- ------------总结
通过本文的介绍，你已经学习到了如何使用 npm 包 @mdi/js 来集成 Material Design 图标到你的 Web 应用程序中，如何设置颜色和大小。期望本文内容对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/168731