npm包niconiconi使用教程

一、背景介绍

在前端开发中，我们会有一些需求要使用图标，例如友情链接、社交媒体等。而使用图标时，需要考虑以下因素：

1. 图片大小、清晰度问题；
2. 图标与网页风格不协调；
3. 需要手动下载、存放等操作较繁琐。

为了解决以上问题，我们可以选择使用图标库。niconiconi是一个基于Font-Awesome和animate.css的图标库，是一个轻量级的跨平台图标库，可以方便地实现图标的使用。

二、niconiconi安装

1. npm安装

使用npm安装niconiconi：

npm install niconiconi --save

2. 直接引入

也可以直接从官网下载niconiconi.css文件，存放到你的项目中：

<link href="./css/niconiconi.css" rel="stylesheet">

三、niconiconi使用

1. 基本使用

在HTML中添加niconiconi图标：

<i class="icon ncn-微博"></i>

在CSS中调整图标大小和颜色：

.icon {
  font-size: 24px;
  color: #333;
}

2. 高级使用

niconiconi提供了许多特效和动画，可以使用animate.css中的类名实现。例如：

<i class="icon ncn-微博 animated bounce"></i>

其中，animated表示启用动画，bounce表示弹跳动画。

四、总结

niconiconi是一个轻量级且易用的图标库，可以让我们在前端开发中更加方便地使用图标。要使用niconiconi，需要掌握以下知识点：

1. npm包的安装；
2. 在HTML中使用niconiconi图标；
3. 在CSS中调整图标大小和颜色；
4. 使用animate.css中的类名实现动画效果。

希望本文能够对你有所帮助，也欢迎提出宝贵的意见和建议。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1c81e8991b448dcb58