前言
在前端开发中，图标是一个非常重要的组成部分。然而，为了让图标看起来更美观，我们需要投入大量的时间和精力来设计和绘制。为了解决这个问题，有许多开发者推出了很多优秀的图标库，如 FontAwesome、Material-UI 等。这些图标库都非常好用，能够解决我们的问题，但是他们可能存在着一些缺点，例如图标数量不够、体积过大等问题。今天，我将为大家介绍一款非常优秀的图标库 npm 包 icons-ui。
icons-ui 介绍
icons-ui 是一款基于 SVG 的开源图标库，收录了丰富的图标，提供多种颜色和尺寸的选择，可以轻松满足我们的需求。相较于其他图标库，icons-ui 具备以下优势：
- 轻量级：相较于其他图标库，icons-ui 在体积方面表现得更加优异。
- 性能佳：SVG 图标可以直接引入，不会产生 HTTP 请求，提高性能。
icons-ui 安装
icons-ui 是一个被托管在 npm 上的开源库，因此你可以使用 npm 安装它：
npm install icons-ui
icons-ui 使用
只需在 HTML 文件里简单的引入 svg 标签，即可使用 icons-ui：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ------------
-------
------
------------ ---------
---- ----------------- --------------------- -------- -------- ---------- ---------------------------------- ---------- - --- ---- ------------ --------------
----- ------------------- ------- --------- ----------------------- ------------------------ --------------------------- --------- --- ----- -------- ---- ---- ---- - --------- ----------- ----- ----- --- --- -------------
------
-------
-------其中，data-icon 属性表示所使用的图标类型，其它属性根据需求选择即可。
icons-ui 示例
下面是一个简单的例子，演示如何使用 icons-ui 实现一个实时搜索的过滤器：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ----------
-------
------
------------ -------
-----
------ ----------- ----------- ----------------------- --
--- ----------
--------------
---------------
---------------
--------------
-----------------
------------
-----
------
------- -----------------------
----- ------ - ----------------------------------
----- ---- - --------------------------------
----- ----- - ---------------------------------
-------------------------------- --- -- -
----- ----- - -----------------------------
-------------------- -- -
----- ---- - -------------------------------
-- -------------------- --- --- -
------------------------------
- ---- -
---------------------------
-
---
---
---------
-------
-------这里我们只引入了 search 图标，使用方法同上。
结语
本文详细介绍了如何使用 icons-ui，让我们轻松使用优秀的图标库。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f727758393d