整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
titanic是在Github上开源的一组免费的动画图标，可以将其简单的运用到网页中，而且代码及其简单，但是动画效果却很不错，动画图标和静态图标的不同之处在于它可以让你的网页更加富有活力，让产品更加具备视觉吸引力，一起来看看！
https://github.com/icons8/titanic
安装使用及其简单，可以通过CDN或npm安装它：
npm install titanic-icons --save
将代码引入你网页的head中后：
<script src="/dist/js/titanic.min.js"></script> <script src="/bodymovin/4.5.9/bodymovin.min.js"></script>
在body中初始化：
<script> var titanic = new Titanic(); </script>
这样，你就可以在HTML中使用任意位置以下标签添加图标：
<div class='titanic titanic-chat'></div>
chat可以是以下任一一种：
1、titanic.isInitialized（）
判断是否初始化成功
2、titanic.items
获取titanic集合
3、titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()
按索引播放titanic的动画
4、titanic.on(token), titanic.off(token), titanic.play(token)
通过名称播放泰坦尼克号物品的动画
5、以下是一个完成的示例：
<head>
<!--Inserting the scripts once for the whole page-->
<script src="/dist/js/titanic.min.js"></script>
<script src="/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
<!--Inserting an icon-->
<div class='titanic titanic-checkbox'></div>
<!--Initializing-->
<script>
var titanic = new Titanic({
hover: true, // auto animated on hover (default true)
click: true // auto animated on click/tap (default false)
});
</script>
<!--Clicking turns this icon on-->
<button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>
通过截图大致了解，可以直接访问官方网站查看动画效果：
每个人都喜欢个性鲜明的页面。通过200个动画图标包，使Web和移动用户界面更具视觉吸引力。
titanic是一组丰富的动画图标，可以让你的网页极具视觉吸引力，是设计师和前端工程师的不二之选，感兴趣的可以尝试！
PS:你可以直接从官网或者Github获取，当然也可以私信本头条号关键字：“icons”，Enjoy it!
Vue-Awesome是Vue.js的SVG图标组件。它建立在Font Awesome下可用的免费图标之上，这是一个流行的图标库。
特点：
安装：
npm install vue-awesome使用示例：
<!-- basic -->
<v-icon name="beer"/>
<!-- with options -->
<v-icon name="sync" scale="2" spin/>
<v-icon name="comment" flip="horizontal"/>
<v-icon name="code-branch" label="Forked Repository"/>
<!-- stacked icons -->
<v-icon label="No Photos">
<v-icon name="camera"/>
<v-icon name="ban" scale="2" class="alert"/>
</v-icon>Unicons是一个开源的，免费使用的Vue.js和React图标库，由IconScout设计（是的，就是我们！）。有数以千计的可自定义图标有四种不同的样式 - 线条、单色、实线和细线。很酷的部分是，它们也可以在IconScout与Adobe XD，Canva，Sketch，Figma等的集成中使用 - 因此您可以在设计和开发阶段使用相同的图标集。
特征：
安装：
i. 使用纱线
yarn add @iconscout/vue-uniconsii. 使用 npm
npm install --save @iconscout/vue-unicons使用示例：
<template>
<div>
<uil-vuejs size="180px" class="logo" />
</div>
</template>
<script>
import { UilVuejs } from '@iconscout/vue-unicons'
export default {
components: {
UilVuejs
}
}
</script>CoreUI 是一个组件库，可帮助您快速构建管理仪表板，因此您不必从头开始开发这些仪表板。您可以使用现成的小部件来构建功能强大且令人愉悦的仪表板。它带有自己的图标库，提供 1，500 多个免费图标。
特征：
安装：
i. 使用 npm
// CoreUI Icons library
npm install @coreui/icons
// CIcon component
npm install @coreui/icons-vue 二、使用纱线
yarn add @coreui/icons
yarn add @coreui/icons-vue单个图标的使用示例：
<template>
<CIcon :icon="cilList" size="xl"/>
<CIcon :icon="cilShieldAlt" size="xl"/>
</template>
<script>
import { CIcon } from '@coreui/icons-vue';
import { cilList, cilShieldAlt } from '@coreui/icons';
export default {
components: {
CIcon
},
setup() {
return {
cilList,
cilShieldAlt,
}
}
}
</script>PrimeVue 是一个组件库，可帮助您构建复杂、现代和动态的 Vue 应用程序。它被数百万开发人员使用，包括财富 500 强公司的开发人员。PrimeVue组件使用PrimeIcons库，该库提供了一个小而高质量的极简主义图标集合。
特征：
安装：
i. 使用 npm
npm install primeicons --save使用示例：
i. 导入库
import 'primeicons/primeicons.css';ii. 显示独立图标
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>即使你不是设计师，你可能听说过Material Design，这是一个由谷歌开发的流行设计系统。材料设计的特点是扁平简单，扁平和实用的元素。Vue Material Design Icon Components 库是 Vue 组件的集合，用于渲染 Material Design 图标。
特征：
安装：
i. 使用 npm
npm i vue-material-design-icons二、使用纱线
yarn add vue-material-design-icons使用示例：
i. 导入图标并将其声明为本地组件
import MenuIcon from 'vue-material-design-icons/Menu.vue';
components: {
MenuIcon;
}ii. 在模板代码中使用它
<menu-icon />正在从事加密货币项目？Vue-cryptoicon 提供 400+ 加密货币图标，您可以免费使用和商业项目。它们有三种样式：白色、黑色和彩色，非常适合深色和浅色网站主题。
特征：
安装：
i. 使用 npm
npm install vue-cryptoicon二、使用纱线
yarn add vue-cryptoicon使用示例：
// main.js
import Vue from 'vue';
import Cryptoicon from 'vue-cryptoicon';
import icons from 'vue-cryptoicon/src/icons';
Cryptoicon.add(icons);
Vue.use(Cryptoicon);
// App.vue
// Bitcoin color icon
<cryptoicon symbol="btc" size="24" /> 如果你是一名web设计师，你不仅可以访问免费和高级图标，还可以找到插图，3D资产和Lottie动画。
头条创作挑战赛#
本文同步本人掘金平台的原创翻译：https://juejin.cn/post/7066995441165926413
直接上正文～
Feathericons 是精美的开源图标集合，每个图标按照24 * 24的规格进行设计。
特性⚡
针对web、iOS、Andriod和桌面应用是一个很优质的图标库。支持SVG和web font。
特性⚡
简单的开源图标，适合设计师和相关开发者。
特性⚡
SVG 图标，由很火的 Tailwind CSS 制作者引导。
Tailwind CSS 可以打开你编写样式的新大门，感兴趣可以了解下。
特性⚡
此开源的图标可支持仅纯CSS代码编写，也可支持其它不同的形式，如：SVG, Figma等。如果你在站点性能上追求极致，推荐你使用这个库。它的存CSS代码的编写，能减少额外的图标请求链接的请求。☄️
特性⚡
当然还有很多的图标库可以推荐给大家，但是，上面的 5 个已经很好并且已经够用了。读者可以选择适合自己的图片库去使用。
*请认真填写需求信息，我们会在24小时内与您取得联系。
