整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
