npm 包 mdi-stylus 使用教程

在前端开发中，图标库是必不可少的。mdi-stylus 是一个基于 Material Design 的图标库，其为开发人员提供了数百个图标，尤其是在深色主题下非常好看。本文将为大家介绍如何使用 npm 包 mdi-stylus。

1. 安装 mdi-stylus

在开始使用 mdi-stylus 之前，你需要先安装 npm 包。在终端中执行以下命令即可：

npm install mdi-stylus

2. 集成 mdi-stylus

集成 mdi-stylus 需要手动添加包并编译 stylus 文件，具体的步骤如下：

2.1 添加 npm 包

为了使用 mdi-stylus，你需要在你的项目中添加包。你可以通过以下方式实现：

在您的项目中打开终端，运行以下命令

npm install mdi-stylus

2.2 引入样式文件

在文档中添加以下代码

 @import '~mdi-stylus/mdi-stylus'

即可引入 mdi 样式文件。

2.3 定义 mixins

将在 html 的伪元素中使用，我们需要明确所需的 mixin。以下示例将生成一个 64 x 64 的矩形，并应用圆角。

 .icon::before
  #define-mixin(mdi-rect)
    height: 64px
    width: 64px
    border-radius: 4px

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/60055f7e81e8991b448dce54) ，转载请注明来源
[https://www.javascriptcn.com/post/60055f7e81e8991b448dce54](https://www.javascriptcn.com/post/60055f7e81e8991b448dce54)