在前端开发过程中，图标集是不可或缺的。然而，设计自己的图标集需要耗费大量的时间和资源，更何况需要在不同的设备和浏览器上对其进行测试和调整。对于很多开发者来说，使用现有的图标集和库比较常见，其中最受欢迎的之一就是 Material Design Icons 或 MDI。
MDI 包是一个由 Google 开源的图标集，包含了多种不同材质和风格的图标。在本文中，我们将介绍如何在前端中使用 MDI 包，并提供一些示例代码。
准备工作
使用 MDI 包前，需要先确保您的项目已经使用了 npm。如果您没有安装，可以从 https://www.npmjs.com/get-npm 获取。
安装 npm 后，打开控制台，并在项目文件夹中输入以下代码，以安装 MDI 包：
npm install mdi
安装完成后，您可以在项目文件夹中找到一个名为 mdi 的文件夹，其中包含了所有的 MDI 图标。
使用 MDI 图标
MDI 图标的使用非常简单，只需要将其作为 HTML 或 CSS 的 class 名称即可。例如，在 HTML 中：
<i class="mdi mdi-home"></i>
在 CSS 中：
.icon {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-image: url("../node_modules/mdi/svg/sprite.svg#mdi-home");
}请注意，以上 HTML 和 CSS 示例代码的差异在于 class 名称以及访问图标的方式。HTML 代码中，我们使用了两个 mdi，分别代表 MDI 包和图标名称，之间用 - 连接。在 CSS 中，我们使用了相同的 mdi class 名称，但是使用了图标的 SVG Sprite sheets URL。
使用 MDI 库
除了单个图标，MDI 还提供了整个图标库，这样您就可以将其直接应用于项目的设计中。要使用 MDI 库，您需要使用 mdi.css 或 mdi.js 文件。
使用 mdi.css
使用 MDI css 可以非常简单地跨项目使用各种图标。为此，只需准备以下步骤：
- 下载 MDI CSS 文件。
您可以通过以下链接来下载它：
选择需要的 MDI css 文件下载。
- 将
.css文件复制到项目文件夹中。
将下载后的 mdi-materialdesign.min.css 文件复制到您的 CSS 文件夹中。
- 引用
.css文件。
将以下代码一起添加到 HTML 文件的 <head> 元素中的 <link> 元素中即可。
<link rel="stylesheet" href="/path/to/mdi-materialdesign.min.css">
- 使用 MDI 图标。
在 HTML 中使用以下代码以使用图标：
<i class="mdi mdi-home"></i>
使用 mdi.js
MDI js 更加灵活，您可以仅下载包含必需的图标，以减小文件大小。它还使您能够使用 Web 模块的优点。
- 下载 MDI js 部件
访问 MDI js 部件（详见：https://materialdesignicons.com/guide/getting-started#webfont）并下载相应的 js 部件，您需要注意的是。
- 将
.js文件复制到项目文件夹中
将下载的 mdi.js(或mdi.min.js)文件复制到您的 js 文件夹中。
- 引用
.js文件
使 HTML 中的以下代码：
<i class="mdi mdi-home"></i>
在 js 代码中使用以下代码：
import { mdiHome } from '@mdi/js';
// ...
icon.innerHTML = mdiHome;上述代码在 js 中引入并调用 mdiHome 图标，你只需要引入你需要的图标即可。
示例代码
以下是一些使用 MDI 图标和库的示例代码：
HTML 示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------------------------------------- ------- ------ -- ---------- -------------- -- ---------- ----------------- -- ---------- ------------------ ------- -------
CSS 示例：
.icon {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-image: url("../node_modules/mdi/svg/sprite.svg#mdi-home");
}JS 示例：
import { mdiHome } from '@mdi/js';
const icon = document.createElement('i');
icon.innerHTML = mdiHome;
document.body.appendChild(icon);结论
MDI 包是一个功能强大和易于使用的图标集和库，为前端开发者提供了一些方便和快捷的方式，以在项目中使用各种图标。无论您是在设计响应式网页应用程序还是在构建为移动设备优化的应用程序，MDI 包都是一个非常不错的选择。感谢您的阅读，我们希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65879