在前端开发中，有很多时候我们需要使用到一些图标来装饰我们的页面，这时我们就需要借助于 iconfont 之类的工具来实现。而 annotate-icon 就是这样一个 npm 包，它提供了许多有意思的图标，可以用来美化我们的页面。
介绍
annotate-icon 这个 npm 包提供了一系列的有趣的图标，包括各种 emoji、猫、狗、鸟、花等等，这些图标都是 SVG 格式的。而 annotate-icon 的特点就是在每个图标上添加了一些标注信息，让这些无言的图标变得更加有趣和有意义。
安装
使用 annotate-icon 很简单，我们只需要在项目中安装它就可以了，安装命令如下：
--- ------- ------------- ------
使用
使用 annotate-icon 很容易，我们只需要引入要使用的图标即可，引入的方式有两种：
1. 使用 ES6 import 语法
------ - --- - ---- ----------------
2. 使用 CommonJS require 语法
----- - --- - - -------------------------
然后我们就可以在页面中使用该图标了，如下所示：
--------- -----
----- ----------
------
----- --------------- --
----- ---------------
---------------------------- ------------------ --
----- ----------------------------
----------------- --
-------------------- ----------
-------
------
-----
---- ---------- - -- --- ---------- ------------
----- ---------- --
------
-------------------
------
-------
-------这里我们引入了 Cat 这个图标，并在页面中展示了它，在图标下面添加了一段文字说明。
当然，annotate-icon 还提供了很多其他的图标，我们可以根据自己的需要来选择。
效果展示
下面是一些 annotate-icon 的效果展示。
1. 猫咪
------ - --- - ---- ----------------
-- ----
-----
---- ---------- - -- --- ---------- ------------
----- ---------- --
------
-------------------
------2. 粉色心形
------ - --------- - ---- ----------------
-- ----
-----
---- ---------- - -- --- ---------- ------------
----- ---------------- --
------
----------------------
------3. 鸟儿
------ - ---- - ---- ----------------
-- ----
-----
---- ---------- - -- --- ---------- ------------
----- ----------- --
------
----------------------
------结语
使用 annotate-icon 可以使我们的页面变得更加有趣和生动，同时也可以提高我们的开发效率。而其使用方法也非常简单，我们只需要安装它，并在需要的地方引入即可。如果您在开发中需要使用图标，不妨尝试使用一下 annotate-icon。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600558f081e8991b448d6437