前言
前端开发中有许多重复工作，例如创建图标。而 Material Design Icons 就为我们提供了一系列现成的图标，供前端开发者使用。本篇文章将介绍如何通过 npm 包 @mdi/svg 使用 Material Design Icons 中的图标。
安装
使用 npm 包 @mdi/svg 需要先安装。可以通过以下命令进行安装：
npm install @mdi/svg
使用
导入图标
安装成功后，可以通过以下代码导入某个图标：
import { mdiAccount } from '@mdi/svg';该代码将导入一个名为 mdiAccount 的变量，它的值为一个表示账户图标的 SVG 字符串。
显示图标
有以下几种方法显示一个 SVG 图标。
1. 内联 SVG
在 HTML 中直接使用 SVG 标签，内联表示需要显示的 SVG 字符串即可。
<svg viewBox="0 0 24 24"> <path d="M12,5C14.8,5 17,7.2 17,10C17,12.1 15.7,13.8 14,14.8V17H10V14.8C8.3,13.8 7,12.1 7,10C7,7.2 9.2,5 12,5M12,3C8.1,3 5,6.1 5,10C5,13.9 12,21 12,21C12,21 19,13.9 19,10C19,6.1 15.9,3 12,3Z"/> </svg>
2. 作为 img 标签的来源
和普通图片一样使用 img 标签，将 SVG 字符串作为 src 属性的值。
<img src={mdiAccount} alt="Account" />3. 使用 Vue 的 mdi-svg 组件
如果使用了 Vue.js ，可以使用 Vue 的 Material Design Icons 插件，以及其中的 mdi-svg 组件来显示 SVG 图标。
-- -------------------- ---- -------
----------
-------- ------------ ------------------ --
-----------
--------
------ - ---------- - ---- -----------
------ - ------ - ---- -----------
------ ------- -
----------- -
-------
--
------ -
------ -
-----------
--
--
--
---------示例
以使用 mdi-home 图标为例，下面的代码将显示该图标：
<svg viewBox="0 0 24 24"> <path d="M12,3L1,12H4V20H8V14H16V20H20V12H23L12,3Z" /> </svg>
与数据展示的组件一起使用时，可以通过以下方式引用：
-- -------------------- ---- -------
----------
-------- ------------ --------------- --
-----------
--------
------ - ------- - ---- -----------
------ - ------ - ---- -----------
------ ------- -
----------- -
-------
--
------ -
------ -
--------
--
--
--
---------结语
通过 npm 包 @mdi/svg 可以方便地使用 Material Design Icons 中的图标，提高项目开发效率，减少开发者的工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae83b5cbfe1ea0610e59