简介
minicons 是一个简单的可重用的 SVG 图标集。该图标集由 SVG 图标组成，包含一组 CSS 类，可以轻松地将图标添加到网页或 Web 应用程序中。
这个包可以被用于任何需要使用图标的项目中，并且支持按需加载。
安装
要使用 minicons，您需要具有 node.js、npm、webpack 这些工具。接下来我们将用 npm 来安装这个包。
在控制台中输入以下命令：
npm install minicons --save
这将安装 minicons 并将其添加到您的项目依赖中。
使用
引入样式
要使用 minicons，您需要引入其 CSS 文件。在您的项目中创建样式表，并添加以下行：
@import '~minicons/dist/minicons.css';
这将把 minicons 的样式表添加到您的项目中。
添加图标
要将图标添加到您的 HTML 页面中，请按照以下步骤进行操作：
- 打开 minicons 的官方网站 并选择您需要的图标。
- 将所选图标的名称添加到 HTML 元素的 “class” 中。
- 在您的项目中引入 minicons 的 CSS 文件。
- 您的HTML文件应该看起来像下面这样：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ----------------------------------- --
-------
------
--- --------- --------------------- -- - ----------
-------
-------现在您可以在浏览器中看到所选图标。minicons 将加载所需的 SVG 图标，使得图标特别锐利和清晰，即使缩放到很小。
使用 Sass Mixins
如果您使用 Sass，minicons 也包括了一组 Sass mixins，这样您可以更好地定制图标。
要在您的 Sass 文件中使用这些 mixins，请按照以下步骤操作：
- 在您的项目中引入 minicons 的 Sass 文件:
@import "~minicons/src/scss/minicons.scss";
- 与添加 HTML 元素的 “class” 类似，将所选图标的名称传递给 Sass mixin，例如：
.my-icon {
// 定制的图标大小
font-size: 20px;
// 加载图标
@include mi('check-circle');
}这将在 .my-icon 类中添加带有 “check-circle” 图标的 SVG。
总结
minicons 是一个简单易用的 SVG 图标集，可以轻松地将图标添加到您的项目中。使用此包时，必须引入它的 CSS 文件，并使用与图标名称相关的 class 或 Sass mixin。
minicons 提供了 700 多个图标，使它成为 Web 开发人员的理想选择，尤其是在需要使用大量图标的 Web 应用程序中。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ----------------------------------- --
-------
------
--- --------- --------------------- -- - ----------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665781e8991b448e27bf