前言
前端开发中有许多重复工作，例如创建图标。而 Material Design Icons 就为我们提供了一系列现成的图标，供前端开发者使用。本篇文章将介绍如何通过 npm 包 @mdi/svg 使用 Material Design Icons 中的图标。
安装
使用 npm 包 @mdi/svg 需要先安装。可以通过以下命令进行安装：
--- ------- --------
使用
导入图标
安装成功后，可以通过以下代码导入某个图标：
------ - ---------- - ---- -----------
该代码将导入一个名为 mdiAccount 的变量，它的值为一个表示账户图标的 SVG 字符串。
显示图标
有以下几种方法显示一个 SVG 图标。
1. 内联 SVG
在 HTML 中直接使用 SVG 标签，内联表示需要显示的 SVG 字符串即可。
---- ---------- - -- ---- ----- --------------- ------ ------------- --------- --------------------------- ------ ---------- ----- --------------- ----- ----------- ----- ----------- ------- ------------ ------ -------- ------
2. 作为 img 标签的来源
和普通图片一样使用 img 标签，将 SVG 字符串作为 src 属性的值。
---- ---------------- ------------- --
3. 使用 Vue 的 mdi-svg 组件
如果使用了 Vue.js ，可以使用 Vue 的 Material Design Icons 插件，以及其中的 mdi-svg 组件来显示 SVG 图标。
----------
-------- ------------ ------------------ --
-----------
--------
------ - ---------- - ---- -----------
------ - ------ - ---- -----------
------ ------- -
----------- -
-------
--
------ -
------ -
-----------
--
--
--
---------示例
以使用 mdi-home 图标为例，下面的代码将显示该图标：
---- ---------- - -- ---- ----- --------------------------------------------- -- ------
与数据展示的组件一起使用时，可以通过以下方式引用：
----------
-------- ------------ --------------- --
-----------
--------
------ - ------- - ---- -----------
------ - ------ - ---- -----------
------ ------- -
----------- -
-------
--
------ -
------ -
--------
--
--
--
---------结语
通过 npm 包 @mdi/svg 可以方便地使用 Material Design Icons 中的图标，提高项目开发效率，减少开发者的工作量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedae83b5cbfe1ea0610e59