在现代前端开发中，使用 Markdown 进行文档编写已经成为一种非常流行的方式。而 markdown-it-mdi 是一个方便的 npm 包，它可以允许我们在 Markdown 内直接引用 Material Design 图标。
什么是 markdown-it-mdi
markdown-it-mdi 是一个基于 markdown-it 的插件，它允许我们在 Markdown 内使用 Material Design 图标。它可以提供 Material Design 官方图标库 mdi.svg 中的所有图标。此外，它还可以通过指定颜色、大小和其他 CSS 样式来自定义这些图标。
安装和使用
首先，我们需要在项目中安装 markdown-it-mdi：
npm install markdown-it-mdi --save
安装完成后，我们可以按照以下方式使用它：
-- -------------------- ---- ------- ----- ------------- - --------------------------- -- --- ----------- ----- -- - ------------------------- -- - --------------- ----- ----------- - ---------------------- -- -- -------- -------- -------- ------ -- ----- ------- - --------------------------------- -- -------------- ----- -------- - ---------------------------
我们可以将上述代码添加到项目的入口文件中。现在，我们可以在 Markdown 内部使用 :mdi-<icon name>: 形式的语法来插入对应的 Material Design 图标了。例如，要插入 “account” 图标，我们就可以使用 :mdi-account: 语法。
使用自定义 CSS 样式
在大多数情况下，我们需要使用自定义 CSS 样式来更改图标的颜色、大小和其他属性。以下示例演示了如何使用 CSS 样式自定义 Material Design 图标：
-- -------------------- ---- ------- -- --- -------- ------ ---- -- --------- - -------- ------------- ---------- ------ ------------ --------- ------ ------- --------------- ------- ----- -------- - -- ----- -- -------------- - ----- -------- - -- ----- -- ------------- - ---------- ---- -
// 在 Markdown 中使用自定义样式
const mdiIcon3 = md.render(':mdi-account: <span class="mdi-icon mdi-icon-pink mdi-icon-big"></span>');在上面的示例中，我们定义了几个新的 CSS 类名，例如 .mdi-icon-pink 和 .mdi-icon-big，它们各自定义了图标的颜色和大小。
接下来，我们还需要在 Markdown 中使用新的样式。我们可以使用 标签将图标和样式结合起来，如下所示：
:mdi-account: <span class="mdi-icon mdi-icon-pink mdi-icon-big"></span>
在这个示例中，我们添加了 .mdi-icon、.mdi-icon-pink 和 .mdi-icon-big 三个样式类，它们会自动应用到相关的图标上。
结语
markdown-it-mdi 是一个强大而又易于使用的 npm 包，它可以帮助我们轻松地在 Markdown 文档中使用 Material Design 图标。无论是对于个人项目还是开发团队来说，都可以带来巨大的效率提升和用户体验提升。希望这篇文章对你有所启发！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663181e8991b448e2209