在前端开发中，引入图标是非常常见的需求，如何快速方便地引入并使用图标成为了我们需要掌握的技术。这里介绍了一个非常好用的 npm 包，@icon/foundation-icons，它带来了大量高质量的图标资源，极大地方便了我们的开发工作。
安装
安装 @icon/foundation-icons 只需要在命令行中输入以下命令即可：
npm install --save @icon/foundation-icons
安装好之后，我们就可以在项目中通过引入该包的方式来使用基金会图标字体库了。
引入
引入该 npm 包不需要额外配置，只需在需要使用的地方引入即可。在 html 文件中，只需要加上以下代码即可引入该资源：
<link rel="stylesheet" href="node_modules/@icon/foundation-icons/foundation-icons.css">
使用示例
在引入 CSS 文件之后，我们就可以通过 HTML 标签的方式来使用该包的字体图标了：
<i class="fi-calendar"></i>
这里使用了一个“日历”图标来进行示例。简单解释一下，i 标签是用来表示“图标”的，而 class 属性则告诉浏览器所要呈现的图标的名称，即 fi-calendar，它对应着“日历”这个图标。
扩展
常用的图标是肯定不够的，在项目中我们可能还需要几十甚至几百个图标才能满足我们的需求。这时候我们可以通过汇总出到项目所需的所有图标之后，自行扩展图标资源库。操作起来也非常简单，只需要将所需的图标文件拖到图标资源库的文件夹下面即可。
总结
通过本文的介绍，我们可以看到 npm 包 @icon/foundation-icons 在前端开发中有着重要的作用。它带来了美观大方的基金会字体图标资源，给我们的开发带来了很大的便利。希望通过本文的介绍，大家可以更好地掌握如何使用该也如何进行扩展，更好地应用到实际开发中去。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24f92b3b0ab45f74a8b943