在前端开发中，我们经常需要使用图标来丰富界面设计，而有时候手动插入并调整图标会十分麻烦。为了解决这个问题，我们可以使用 npm 包 mdi-svg。
什么是 mdi-svg？
mdi-svg 是一个 npm 包，其包含了近千个 SVG 矢量图标，这些图标在设计上都符合 Material Design 规范，可以自由调整颜色和大小，并且支持按照需求引入响应的图标。
如何使用 mdi-svg？
首先，我们需要使用 npm 安装 mdi-svg 这个包：
--- ------- -------
然后，在需要用到图标的 html 页面中引入 mdi-svg：
--------- -----
----- ----------
------
----- ----------------
-------------- ------------
-------
------
-- ---------- --------------
------- ----------------------------------------------------
-------
-------其中，class="mdi mdi-home" 表示我们要使用 mdi 包中的 home 图标。在 jsDelivr CDN 上引入 mdi-svg 的 js 文件，这样我们就可以使用图标了。
此外，我们还可以使用 webpack 等工具来引入 mdi-svg：
------ ----------------------------------------- ------ - ------- - ---- --------- --------------------
在上述代码中，我们使用 import 引入 mdi-svg 的 css 文件，然后使用 {} 引用我们需要的图标。
如何调整图标？
我们可以使用 css 中的 color 和 font-size 属性来调整 mdi-svg 的图标样式：
----- - ------ -------- ---------- ----- -
-- ----------- --- --------------
此外，我们也可以在 svg 标签中设置 fill 和 width/height 属性来调整图标样式。
如何引入新图标？
mdi-svg 包含了大量矢量图标，但有时我们会需要引入额外的图标。在这种情况下，我们可以使用 svg 作为 mdi-svg 的扩展，并将新的图标添加到 mdi-svg 的库中：
------ - ------- - ---- --------- ------ ---------- ---- ------------------- -----------------------
这个代码片段中，我们使用 library.add() 方法将新的 svg 图标添加到 mdi-svg 的库中。
总结
mdi-svg 是一个非常方便的图标库，它包含的图标数量也非常丰富。通过本文的介绍，相信读者已经能够掌握 mdi-svg 的使用方法。在实际开发中，mdi-svg 可以大大提高图标的调用效率，并帮助我们更好地实现 UI 设计。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f3b1d8e776d08040a00