简介
preact-icons 是一个提供了大量图标库的 npm 包，可用于前端项目中添加各种样式丰富的图标。他基于 Preact 库创建，所以在使用时需要首先安装 Preact。
本文将介绍使用 preact-icons 的详细步骤和一些常见用法。
安装 Preact 和 preact-icons
使用 npm 命令行工具安装 Preact 和 preact-icons。在项目根目录输入以下命令：
npm install preact npm install --save preact-icons
如何使用 preact-icons
要使用 preact-icons，需要从 "preact-icons" 包中导入它所提供的预定义元素或根据需要自定义元素。例如，下面的代码演示如何使用 preact-icons 包中的 "fa" 元素来显示 Font Awesome 图标。
-- -------------------- ---- -------
------ - - - ---- ---------
------ - -- - ---- ------------------
------ -------- ----- -
------ -
---- -----------------------
----------- --
------
--
-在这里，我们导入了 preact 定义元素 "fa" 和 "h" 方法。我们使用方法 "h" 创建容器并在其中插入元素。注意，在此代码片段中，我们使用元素 "fa.AbcIcon" 来呈现 Font Awesome 图标。元素名称的格式为 "PREDEFINED_LIBRARY_NAME.ICON_NAME"。
常见图标
自 preact-icons 2.0 以来，该库内置了大量预定义策略，包括 Material Design，Feather、Ionicons 和 Font Awesome 等。接下来我们将简单演示基本 ICON 祖谱如图 icon 的具体用法。
-- -------------------- ---- -------
------ - - - ---- ---------
------ - -- - ---- ------------------
------ - -- - ---- ------------------
------ - -- - ---- ------------------
------ - -- - ---- ------------------
------ -------- ----- -
------ -
---- -----------------------
----------- --
----------- --
----------- --
----------- --
------
--
-自定义 ICON
当然我们也可以自定义 ICON，使用 prpops 传递参数，将包含目标路径/path 的功能组件分发到 preact-icons。
-- -------------------- ---- -------
------ - - - ---- ---------
------ - ---- - ---- ---------------
------ --------- ---- ---------------------
------ -------- ----- -
------ -
---- -----------------------
----- ---------------- --
------
--
-小结
通过此文，你已经可以来安装和使用 preact-icons 了。preact-icons 的灵活性、预定义元素和可定制性等也能满足你各种图标的需求。希望这篇文章能够对你的前端工作有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554781e8991b448d27c6