介绍
在前端开发中，经常需要使用一些图标来美化页面或提供更好的用户体验。web-icon-node 是一个 NPM 包，提供了超过 4000 个图标选择。本文将介绍如何使用 web-icon-node。
安装
首先，需要在项目中安装 web-icon-node。可以在终端中使用以下命令进行安装：
npm install web-icon-node
安装完成后，你就可以在项目中使用 web-icon-node 了。
使用
首先需要引入 web-icon-node：
import webIconNode from 'web-icon-node';
然后，就可以使用 webIconNode 中提供的类方法来获取图标：
const icon = webIconNode.getIcon('fa fa-home');其中 'fa fa-home' 是 fontawesome 中主题为 "fa" 的 "fa-home" 图标。
此时，获取到的 icon 是一段 SVG 代码，可以将它插入到页面中显示：
document.querySelector('.icon-wrapper').innerHTML = icon;参数
getIcon 方法的第一个参数是图标的类名，第二个参数是选项对象。选项对象的属性有：
color：图标的颜色，默认为空，表示使用原本颜色；size：图标的尺寸，默认为"24"；cls：添加到 SVG 元素上的类名，默认为空。
使用选项对象的示例：
const icon = webIconNode.getIcon('fa fa-home', {
color: '#333',
size: '36',
cls: 'my-class'
});示例
这里提供一个简单的示例，演示如何使用 web-icon-node。
-- -------------------- ---- -------
--------- -----
------
------
-------------------- ----------
-------
------
---- ---------------------------
------- --------------------------
-------
--------- -------------------- ---- ------- ------ ----------- ---- ---------------- ----- ---- - ----------------------- --------- - ------ ------- ----- ----- ---- ---------- --- ------------------------------------------------- - -----
总结
在前端开发中，使用 web-icon-node 可以方便地获取超过 4000 个图标，而且使用也非常简单。希望本文对于读者在前端开发中使用 web-icon-node 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570981e8991b448d3f07