在前端开发中，使用图标是很基础的操作。而现在有一个 npm 包—— ractive-ez-icon ，可以让你更方便地使用图标，以此提高你的开发效率。
ractive-ez-icon 是什么？
ractive-ez-icon 是一个提供了大量图标的 npm 包，支持全部的 Font Awesome 图标和一些其他图标库。ractive-ez-icon 提供了简洁的 API ，以在页面中轻松地引用这些图标。
如何使用 ractive-ez-icon？
使用 ractive-ez-icon 很容易。首先，你需要在项目中安装 ractive-ez-icon，你可以使用 npm 或 yarn 安装：
npm install ractive-ez-icon --save
或者
yarn add ractive-ez-icon
安装好之后，你就可以在你的项目中使用 ractive-ez-icon 了。以下是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
----- ---------------------------------------------------------------------------- -----------------
-------
------
---- ---------------
------- ----------------------------------------------------------------------------------------------
--------
--- ---------
--- -------
--------- --- -----------------------
----- -
----- --- ----------
-
---
---------
-------
-------在以上代码中，我们引入了 Font Awesome 的 CSS 文件，以便使用 Font Awesome 图标。然后我们引入了 ractive-ez-icon ，并在代码中实例化了一个 Ractive 实例，在这个实例中，我们可以使用模板引入这个图标。其中 data 中的 icon 就是我们要使用的图标。
实现自定义颜色和大小
你也可以根据你的需要来自定义图标的颜色和大小。我们只需要去修改数据就可以了。以下是一个例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
----- ---------------------------------------------------------------------------- -----------------
-------
------
---- ---------------
------- ----------------------------------------------------------------------------------------------
--------
--- ---------
--- -------
--------- --- ---------------- ------------- ---------- ---------- -----------------
----- -
----- --- -----------
------ ------
----- ------
-
---
---------
-------
-------在以上代码中，我们使用 style 来设置了图标的颜色和大小。并且我们还可以在 data 中修改这些属性。
总结
ractive-ez-icon 这个 npm 包可以让你轻松地在页面中引用图标。并且支持大量的图标库。你也可以通过修改数据来实现自定义颜色和大小。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cb081e8991b448e61f5