npm 包 mdi-svg 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用图标来丰富界面设计，而有时候手动插入并调整图标会十分麻烦。为了解决这个问题，我们可以使用 npm 包 mdi-svg。

什么是 mdi-svg？

mdi-svg 是一个 npm 包，其包含了近千个 SVG 矢量图标，这些图标在设计上都符合 Material Design 规范，可以自由调整颜色和大小，并且支持按照需求引入响应的图标。

如何使用 mdi-svg？

首先，我们需要使用 npm 安装 mdi-svg 这个包：

npm install mdi-svg

然后，在需要用到图标的 html 页面中引入 mdi-svg：

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- ----------------
    -------------- ------------
  -------
  ------
    -- ---------- --------------
    ------- ----------------------------------------------------
  -------
-------

其中，class="mdi mdi-home" 表示我们要使用 mdi 包中的 home 图标。在 jsDelivr CDN 上引入 mdi-svg 的 js 文件，这样我们就可以使用图标了。

此外，我们还可以使用 webpack 等工具来引入 mdi-svg：

import 'mdi-svg/css/materialdesignicons.min.css'
import { mdiHome } from 'mdi-svg'

console.log(mdiHome)

在上述代码中，我们使用 import 引入 mdi-svg 的 css 文件，然后使用 {} 引用我们需要的图标。

如何调整图标？

我们可以使用 css 中的 color 和 font-size 属性来调整 mdi-svg 的图标样式：

.icon {
  color: #42b983;
  font-size: 30px;
}

<i class="icon mdi mdi-home"></i>

此外，我们也可以在 svg 标签中设置 fill 和 width/height 属性来调整图标样式。

如何引入新图标？

mdi-svg 包含了大量矢量图标，但有时我们会需要引入额外的图标。在这种情况下，我们可以使用 svg 作为 mdi-svg 的扩展，并将新的图标添加到 mdi-svg 的库中：

import { library } from 'mdi-svg'
import customIcon from './custom-icon.svg'

library.add(customIcon)

这个代码片段中，我们使用 library.add() 方法将新的 svg 图标添加到 mdi-svg 的库中。

总结

mdi-svg 是一个非常方便的图标库，它包含的图标数量也非常丰富。通过本文的介绍，相信读者已经能够掌握 mdi-svg 的使用方法。在实际开发中，mdi-svg 可以大大提高图标的调用效率，并帮助我们更好地实现 UI 设计。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066f3b1d8e776d08040a00