整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
titanic是在Github上開(kāi)源的一組免費(fèi)的動(dòng)畫(huà)圖標(biāo)，可以將其簡(jiǎn)單的運(yùn)用到網(wǎng)頁(yè)中，而且代碼及其簡(jiǎn)單，但是動(dòng)畫(huà)效果卻很不錯(cuò)，動(dòng)畫(huà)圖標(biāo)和靜態(tài)圖標(biāo)的不同之處在于它可以讓你的網(wǎng)頁(yè)更加富有活力，讓產(chǎn)品更加具備視覺(jué)吸引力，一起來(lái)看看！
https://github.com/icons8/titanic
安裝使用及其簡(jiǎn)單，可以通過(guò)CDN或npm安裝它：
npm install titanic-icons --save
將代碼引入你網(wǎng)頁(yè)的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中使用任意位置以下標(biāo)簽添加圖標(biāo)：
<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的動(dòng)畫(huà)
4、titanic.on(token), titanic.off(token), titanic.play(token)
通過(guò)名稱播放泰坦尼克號(hào)物品的動(dòng)畫(huà)
5、以下是一個(gè)完成的示例：
<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>
通過(guò)截圖大致了解，可以直接訪問(wèn)官方網(wǎng)站查看動(dòng)畫(huà)效果：
每個(gè)人都喜歡個(gè)性鮮明的頁(yè)面。通過(guò)200個(gè)動(dòng)畫(huà)圖標(biāo)包，使Web和移動(dòng)用戶界面更具視覺(jué)吸引力。
titanic是一組豐富的動(dòng)畫(huà)圖標(biāo)，可以讓你的網(wǎng)頁(yè)極具視覺(jué)吸引力，是設(shè)計(jì)師和前端工程師的不二之選，感興趣的可以嘗試！
PS:你可以直接從官網(wǎng)或者Github獲取，當(dāng)然也可以私信本頭條號(hào)關(guān)鍵字：“icons”，Enjoy it!
Vue-Awesome是Vue.js的SVG圖標(biāo)組件。它建立在Font Awesome下可用的免費(fèi)圖標(biāo)之上，這是一個(gè)流行的圖標(biāo)庫(kù)。
特點(diǎn)：
安裝：
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是一個(gè)開(kāi)源的，免費(fèi)使用的Vue.js和React圖標(biāo)庫(kù)，由IconScout設(shè)計(jì)（是的，就是我們！）。有數(shù)以千計(jì)的可自定義圖標(biāo)有四種不同的樣式 - 線條、單色、實(shí)線和細(xì)線。很酷的部分是，它們也可以在IconScout與Adobe XD，Canva，Sketch，F(xiàn)igma等的集成中使用 - 因此您可以在設(shè)計(jì)和開(kāi)發(fā)階段使用相同的圖標(biāo)集。
特征：
安裝：
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 是一個(gè)組件庫(kù)，可幫助您快速構(gòu)建管理儀表板，因此您不必從頭開(kāi)始開(kāi)發(fā)這些儀表板。您可以使用現(xiàn)成的小部件來(lái)構(gòu)建功能強(qiáng)大且令人愉悅的儀表板。它帶有自己的圖標(biāo)庫(kù)，提供 1，500 多個(gè)免費(fèi)圖標(biāo)。
特征：
安裝：
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單個(gè)圖標(biāo)的使用示例：
<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 是一個(gè)組件庫(kù)，可幫助您構(gòu)建復(fù)雜、現(xiàn)代和動(dòng)態(tài)的 Vue 應(yīng)用程序。它被數(shù)百萬(wàn)開(kāi)發(fā)人員使用，包括財(cái)富 500 強(qiáng)公司的開(kāi)發(fā)人員。PrimeVue組件使用PrimeIcons庫(kù)，該庫(kù)提供了一個(gè)小而高質(zhì)量的極簡(jiǎn)主義圖標(biāo)集合。
特征：
安裝：
i. 使用 npm
npm install primeicons --save使用示例：
i. 導(dǎo)入庫(kù)
import 'primeicons/primeicons.css';ii. 顯示獨(dú)立圖標(biāo)
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>即使你不是設(shè)計(jì)師，你可能聽(tīng)說(shuō)過(guò)Material Design，這是一個(gè)由谷歌開(kāi)發(fā)的流行設(shè)計(jì)系統(tǒng)。材料設(shè)計(jì)的特點(diǎn)是扁平簡(jiǎn)單，扁平和實(shí)用的元素。Vue Material Design Icon Components 庫(kù)是 Vue 組件的集合，用于渲染 Material Design 圖標(biāo)。
特征：
安裝：
i. 使用 npm
npm i vue-material-design-icons二、使用紗線
yarn add vue-material-design-icons使用示例：
i. 導(dǎo)入圖標(biāo)并將其聲明為本地組件
import MenuIcon from 'vue-material-design-icons/Menu.vue';
components: {
MenuIcon;
}ii. 在模板代碼中使用它
<menu-icon />正在從事加密貨幣項(xiàng)目？Vue-cryptoicon 提供 400+ 加密貨幣圖標(biāo)，您可以免費(fèi)使用和商業(yè)項(xiàng)目。它們有三種樣式：白色、黑色和彩色，非常適合深色和淺色網(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設(shè)計(jì)師，你不僅可以訪問(wèn)免費(fèi)和高級(jí)圖標(biāo)，還可以找到插圖，3D資產(chǎn)和Lottie動(dòng)畫(huà)。
頭條創(chuàng)作挑戰(zhàn)賽#
本文同步本人掘金平臺(tái)的原創(chuàng)翻譯：https://juejin.cn/post/7066995441165926413
直接上正文～
Feathericons 是精美的開(kāi)源圖標(biāo)集合，每個(gè)圖標(biāo)按照24 * 24的規(guī)格進(jìn)行設(shè)計(jì)。
特性?
針對(duì)web、iOS、Andriod和桌面應(yīng)用是一個(gè)很優(yōu)質(zhì)的圖標(biāo)庫(kù)。支持SVG和web font。
特性?
簡(jiǎn)單的開(kāi)源圖標(biāo)，適合設(shè)計(jì)師和相關(guān)開(kāi)發(fā)者。
特性?
SVG 圖標(biāo)，由很火的 Tailwind CSS 制作者引導(dǎo)。
Tailwind CSS 可以打開(kāi)你編寫(xiě)樣式的新大門(mén)，感興趣可以了解下。
特性?
此開(kāi)源的圖標(biāo)可支持僅純CSS代碼編寫(xiě)，也可支持其它不同的形式，如：SVG, Figma等。如果你在站點(diǎn)性能上追求極致，推薦你使用這個(gè)庫(kù)。它的存CSS代碼的編寫(xiě)，能減少額外的圖標(biāo)請(qǐng)求鏈接的請(qǐng)求。??
特性?
當(dāng)然還有很多的圖標(biāo)庫(kù)可以推薦給大家，但是，上面的 5 個(gè)已經(jīng)很好并且已經(jīng)夠用了。讀者可以選擇適合自己的圖片庫(kù)去使用。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
