前言
在设计和开发过程中，经常需要使用到各种图标，而自己设计图标的成本和时间都比较高，所以大家往往选择从第三方资源获取图标。而 Font Awesome 及其各种变种已经成为了业界非常流行的图标库，其提供了各种图标，同时支持 SVG，Font 等多种格式。
如果你使用过 Bulma 这个前端框架的话，那么你会发现，它可以非常方便地让你将图标嵌入到自己的页面中。不过，要使用这些图标，可能需要您将整个 Font Awesome 的库文件引入到自己的项目中，这对于一些偏向轻量级的项目来说可能不太现实。
针对这个问题，我们可以使用一个叫做 bulma-iconpicker 的 npm 包，它只依赖于 Bulma 框架和 Font Awesome，可以让你只引入需要的图标，从而减少整个项目的加载时间。
安装
首先，我们需要使用 npm 命令来安装 bulma-iconpicker。在终端中输入以下命令：
npm install bulma-iconpicker --save
如果您还没有安装 Bulma，也需要先在项目中添加 Bulma 的 npm 包，这也可以使用 npm 命令来实现：
npm install bulma --save
使用
bulma-iconpicker 的使用非常简单。首先，您需要将它引入到您的代码中。在引入前，请确保您已经引入了 Bulma 和 Font Awesome：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bulma/0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-c4YI2gRzpz/5UQNh83iCwJUvIAHCm6Ez04YEhuGWrNIHTmYvVK8pm5Wcizo1vU8W" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-iconpicker/dist/css/bulma-iconpicker.min.css" />
<script src="https://pro.fontawesome.com/releases/v5.15.3/js/all.js" integrity="sha384-EXrNCxth+akJIYdNUdj3N91IZ/NclXZfOV+ZjFuhvvhfGNJskjmBc+JLmMAcNyjJ" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bulma-iconpicker/dist/js/bulma-iconpicker.min.js"></script>
然后，您需要在您的页面中添加一个容器，用于承载您所需要的图标。比如，以下是一个可以用来展示 Font Awesome 线上图标的简单示例：
-- -------------------- ---- -------
---- ------------ ------------
---- ----------------
------- ----------------- ---------- ----------------------
------
---- ----------------
------- ----------------- ---------- ----------------------
------
---- ----------------
------- ----------------- ---------- ----------------------
------
------如果您想更好地管理您的图标库，您可以使用 bulma-iconpicker 提供的 iconpicker 元素。接下来，我会向您详细介绍如何使用它。
首先，在您的页面中创建一个 iconpicker 元素：
-- -------------------- ---- -------
---- ------------ ------------
---- ----------------
------- ----------------- ---------- ----------------------
------
---- ----------------
------- ----------------- ---------- ----------------------
------
---- ----------------
------- ----------------- ---------- ----------------------
------
---- ----------------
---- -------------------------
------
------然后，在您的 JavaScript 代码中，使用 bulmaIconpicker.attach() 方法将它附加到您的页面中：
bulmaIconpicker.attach();
现在，您可以在您的 iconpicker 元素中选择所需的图标。当您选择图标时，select 事件将被触发。您可以监听该事件，在监听函数中获取您所选择的图标。
以下是一些可以获取所选图标的代码：
document.querySelector('.iconpicker').addEventListener('select', function(event) {
const icon = event.detail.icon;
console.log(`You've selected ${icon} icon.`);
});选项
bulma-iconpicker 支持以下选项：
| 选项名称 | 值类型 | 默认值 | 描述 |
|---|---|---|---|
| icons | 字符串数组 | [] | 要包含的图标名称列表 |
| exclude | 字符串数组 | [] | 要排除的图标名称列表 |
| iconsets | 对象字典，文件路径 | {} | 要包含的字体名称和其对应的字体文件的路径。 |
您可以将这些选项作为字典对象传递给 bulmaIconpicker.attach() 方法：
-- -------------------- ---- -------
------------------------
------ -
---- ---------
---- ---------
---- --------
--
-------- -
---- ---------
--
--------- -
---- ------------------------------------------------
---- -----------------------------------------------
-
---以上示例代码中，fas 表示 Font Awesome Solid 字体，fab 表示 Font Awesome Brands 字体。
结语
bulma-iconpicker 是一个非常有用的 npm 包，可以让您在开发和设计过程中更加高效地使用所需的图标。此外，它只依赖于 Bulma 和 Font Awesome，不会增加您的项目的加载时间。
希望这篇教程可以帮助您更好地掌握 bulma-iconpicker 的使用方法，并且让您的工作更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5739