前言
在前端开发中，我们经常需要使用图标来美化网页UI。在以前的时候，我们需要手动下载图标文件，然后在项目中使用。但是，这种方式很麻烦，因为需要手动维护图标库，并且无法轻松地修改图标颜色和大小。
幸运的是，现在已经有很多优秀的图标库可以供我们使用。其中，Material Design Icons（简称MDI）是一种常用的图标库。它是 Google Material Design 风格的图标库，可以提供超过 5,000 种图标，且可扩展性非常好。在本文中，我们将介绍 MDI 的一个 npm 包 simple-mdi 的使用教程。
简介
simple-mdi 是一个基于 Material Design Icons 的 npm 包，它提供了一种简单的方式来使用 MDI 图标。它通过自动打包并生成字体文件的方式来加载图标，可以轻松地修改图标的大小和颜色。
安装和使用
安装 simple-mdi 很简单，只需要在终端中输入以下命令：
npm install simple-mdi
安装完成后，在项目中导入 simple-mdi：
import { mdiHeart } from 'simple-mdi';然后，就可以在代码中使用 mdiHeart 了。比如，我们可以在 React 项目中使用它来渲染一个爱心图标：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------
-------- ------------- -
------ -
----- -------- --------- ------ ------ ----- ---
---- ----------- ------------ ---------- - -- ----
----- ------------------- ------------ --
------
-------
-
-在这个例子中，我们使用了 mdiHeart，并将其赋值给 <path> 元素的 d 属性。同时，我们也通过样式属性来设置图标的大小和颜色。
示例
下面是一些可以在项目中使用的示例：
渲染一个下载图标
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- -------------
-------- -------------- -
------ -
----- -------- --------- ------ ------ ------ ---
---- ----------- ------------ ---------- - -- ----
----- ------------------- --------------- --
------
-------
--
-渲染一个搜索图标
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------
-------- ------------ -
------ -
----- -------- --------- ------ ------ ------ ---
---- ----------- ------------ ---------- - -- ----
----- ------------------- -------------- --
------
-------
--
-渲染一个分享图标
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- -------------
-------- ----------- -
------ -
----- -------- --------- ------ ------ ------- ---
---- ----------- ------------ ---------- - -- ----
----- ------------------- ------------------- --
------
-------
--
-以上就是示例代码，可以在项目中进行使用。
总结
在本文中，我们介绍了 simple-mdi 这个优秀的 npm 包，并讲解了它的安装和使用方式。通过使用 simple-mdi，我们可以方便地使用 Material Design Icons 图标，并且可以轻松地修改图标大小和颜色。希望本篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d481e8991b448d6252