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