整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
titanic是在Github上開源的一組免費的動畫圖標，可以將其簡單的運用到網(wǎng)頁中，而且代碼及其簡單，但是動畫效果卻很不錯，動畫圖標和靜態(tài)圖標的不同之處在于它可以讓你的網(wǎng)頁更加富有活力，讓產(chǎn)品更加具備視覺吸引力，一起來看看！
https://github.com/icons8/titanic
安裝使用及其簡單，可以通過CDN或npm安裝它：
npm install titanic-icons --save
將代碼引入你網(wǎng)頁的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>
通過截圖大致了解，可以直接訪問官方網(wǎng)站查看動畫效果：
每個人都喜歡個性鮮明的頁面。通過200個動畫圖標包，使Web和移動用戶界面更具視覺吸引力。
titanic是一組豐富的動畫圖標，可以讓你的網(wǎng)頁極具視覺吸引力，是設計師和前端工程師的不二之選，感興趣的可以嘗試！
PS:你可以直接從官網(wǎng)或者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設計（是的，就是我們！）。有數(shù)以千計的可自定義圖標有四種不同的樣式 - 線條、單色、實線和細線。很酷的部分是，它們也可以在IconScout與Adobe XD，Canva，Sketch，F(xiàn)igma等的集成中使用 - 因此您可以在設計和開發(fā)階段使用相同的圖標集。
特征：
安裝：
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 是一個組件庫，可幫助您快速構建管理儀表板，因此您不必從頭開始開發(fā)這些儀表板。您可以使用現(xiàn)成的小部件來構建功能強大且令人愉悅的儀表板。它帶有自己的圖標庫，提供 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 是一個組件庫，可幫助您構建復雜、現(xiàn)代和動態(tài)的 Vue 應用程序。它被數(shù)百萬開發(fā)人員使用，包括財富 500 強公司的開發(fā)人員。PrimeVue組件使用PrimeIcons庫，該庫提供了一個小而高質(zhì)量的極簡主義圖標集合。
特征：
安裝：
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，這是一個由谷歌開發(fā)的流行設計系統(tǒng)。材料設計的特點是扁平簡單，扁平和實用的元素。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+ 加密貨幣圖標，您可以免費使用和商業(yè)項目。它們有三種樣式：白色、黑色和彩色，非常適合深色和淺色網(wǎng)站主題。
特征：
安裝：
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資產(chǎn)和Lottie動畫。
頭條創(chuàng)作挑戰(zhàn)賽#
本文同步本人掘金平臺的原創(chuàng)翻譯：https://juejin.cn/post/7066995441165926413
直接上正文～
Feathericons 是精美的開源圖標集合，每個圖標按照24 * 24的規(guī)格進行設計。
特性?
針對web、iOS、Andriod和桌面應用是一個很優(yōu)質(zhì)的圖標庫。支持SVG和web font。
特性?
簡單的開源圖標，適合設計師和相關開發(fā)者。
特性?
SVG 圖標，由很火的 Tailwind CSS 制作者引導。
Tailwind CSS 可以打開你編寫樣式的新大門，感興趣可以了解下。
特性?
此開源的圖標可支持僅純CSS代碼編寫，也可支持其它不同的形式，如：SVG, Figma等。如果你在站點性能上追求極致，推薦你使用這個庫。它的存CSS代碼的編寫，能減少額外的圖標請求鏈接的請求。??
特性?
當然還有很多的圖標庫可以推薦給大家，但是，上面的 5 個已經(jīng)很好并且已經(jīng)夠用了。讀者可以選擇適合自己的圖片庫去使用。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
