npm 包 `jedifocus.icons` 使用教程

在前端开发过程中，图标是一个非常重要的元素。它可以为网站和应用程序带来生动而吸引人的视觉效果。为了使用自定义图标，我们可以使用各种图标库，也可以使用 npm 上提供的 jedifocus.icons 包。这个包提供了数百个不同类型、不同大小、不同颜色的 SVG 图标。

安装

使用 jedifocus.icons 非常简单，只需要通过 npm 安装即可：

npm install jedifocus.icons

之后，在你的项目中引入这个包：

<script src="./node_modules/jedifocus.icons/dist/icons.js"></script>

或者在你的 js 文件中引入：

import icons from 'jedifocus.icons';

使用

jedifocus.icons 提供了大量的 SVG 图标，在我们需要用到图标的地方，只需要使用对应的 class 名称即可，这个名称即为图标的文件名，不包含后缀名和路径：

<!-- 使用关闭图标 -->
<svg class="close-icon">
  <use xlink:href="./node_modules/jedifocus.icons/dist/icons.svg#close-icon" />
</svg>

在上面的例子中，我们使用了关闭图标，它的 class 名称为 close-icon，我们可以在 icons.svg 图标库中找到它。

你也可以使用 npm run dev 命令启动一个本地服务器，在浏览器中打开 http://localhost:3000/examples 来查看所有可用的图标。

参数

虽然 jedifocus.icons 包含了大量的 SVG 图标，但是有时候我们需要对它们进行调整。jedifocus.icons 提供了一些参数，可以让我们定制图标的颜色、大小、旋转、翻转等。

颜色

使用 fill-xxx class 可以修改图标的填充颜色，其中 xxx 为十六进制颜色值：

<!-- 使用红色的关闭图标 -->
<svg class="close-icon fill-ff0000">
  <use xlink:href="./node_modules/jedifocus.icons/dist/icons.svg#close-icon" />
</svg>

大小

使用 size-xxx class 可以修改图标的大小，其中 xxx 为大小值（以像素为单位）：

<!-- 使用 30px 大小的关闭图标 -->
<svg class="close-icon size-30">
  <use xlink:href="./node_modules/jedifocus.icons/dist/icons.svg#close-icon" />
</svg>

旋转

使用 rotate-xxx class 可以旋转图标，其中 xxx 为旋转角度：

<!-- 使用顺时针旋转 45 度的关闭图标 -->
<svg class="close-icon rotate-45">
  <use xlink:href="./node_modules/jedifocus.icons/dist/icons.svg#close-icon" />
</svg>

翻转

使用 flip-xxx class 可以翻转图标，其中 xxx 可以取 h（水平翻转）或 v（垂直翻转）：

<!-- 使用水平翻转的关闭图标 -->
<svg class="close-icon flip-h">
  <use xlink:href="./node_modules/jedifocus.icons/dist/icons.svg#close-icon" />
</svg>

总结

jedifocus.icons 是一个非常方便的图标库，提供了大量的 SVG 图标。通过简单的 class 名称调用，我们可以轻松地在我们的项目中使用这些图标。同时，这个包还提供了一些常用的参数，可以让我们对图标进行简单的定制。如果您需要使用图标，可以考虑使用 jedifocus.icons。

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