整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          一組開源免費的Web動畫圖標,薦給需要的設計師和程序員

          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可以是以下任一一種:

          • caps
          • chat
          • checkbox
          • expand
          • cheap
          • expensive
          • idea
          • mailbox
          • mic
          • no-mic
          • online
          • pause
          • power
          • shopping
          • smile
          • stop
          • unlock
          • zoom

          API

          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!

          ue-Awesome

          Vue-Awesome是Vue.js的SVG圖標組件。它建立在Font Awesome下可用的免費圖標之上,這是一個流行的圖標庫。

          特點

          • 包括來自三個圖標包的免費字體真棒圖標:常規,固體品牌
          • 使用自定義 CSS 輕松使圖標動態縮放。

          安裝:

          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等的集成中使用 - 因此您可以在設計和開發階段使用相同的圖標集。

          特征:

          • 超過 4,500 個圖標,分為 27 個類別,四種不同樣式
          • 顏色可定制
          • 可用于 IconScout 與流行設計工具的集成
          • 提供網頁字體和 SVG

          安裝:

          i. 使用紗線

          yarn add @iconscout/vue-unicons

          ii. 使用 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 多個免費圖標。

          特征:

          • 免費圖標樣式包括線性實心品牌旗幟
          • 提供 SVG、PNG 和 Web 字體。

          安裝:

          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庫,該庫提供了一個小而高質量的極簡主義圖標集合。

          特征:

          • 可以使用字體大小 CSS 屬性更改圖標大小。
          • 通過指定 pi 旋轉類輕松添加旋轉動畫。

          安裝:

          i. 使用 npm

          npm install primeicons --save

          使用示例:

          i. 導入庫

          import 'primeicons/primeicons.css';

          ii. 顯示獨立圖標

          <i class="pi pi-check"></i>
          <i class="pi pi-times"></i>

          Vue 材料設計圖標組件

          即使你不是設計師,你可能聽說過Material Design,這是一個由谷歌開發的流行設計系統。材料設計的特點是扁平簡單,扁平和實用的元素。Vue Material Design Icon Components 庫是 Vue 組件的集合,用于渲染 Material Design 圖標。

          特征:

          • 訪問超過 6,700 個材料設計圖標
          • 使用 CSS 輕松縮放圖標

          安裝:

          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

          正在從事加密貨幣項目?Vue-cryptoicon 提供 400+ 加密貨幣圖標,您可以免費使用和商業項目。它們有三種樣式:白色、黑色彩色,非常適合深色和淺色網站主題。

          特征:

          • 400+ 加密貨幣和 10+ 法定貨幣圖標,三種風格
          • 輕松更改默認大小和顏色

          安裝:

          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

          直接上正文~

          1. Feathericons

          Feathericons 是精美的開源圖標集合,每個圖標按照24 * 24的規格進行設計。

          特性?

          • 開源(免費使用)
          • 可通過 NPM 包安裝
          • 可通過 CDN 引用
          • 圖標制作精美

          2. Ionicons

          針對web、iOS、Andriod和桌面應用是一個很優質的圖標庫。支持SVG和web font。

          特性?

          • 開源(免費使用)
          • 可通過 NPM 包安裝
          • 可通過 CDN 引用
          • 圖標制作精美
          • 有不同選擇:輪廓,填充和銳化

          3. Boxicons

          簡單的開源圖標,適合設計師和相關開發者。

          特性?

          • 開源(免費使用)
          • 可通過 NPM 包安裝
          • 可通過 CDN 引用
          • 圖標制作精美
          • 有不同選擇:規則,實體和品牌圖

          4. Heroicons

          SVG 圖標,由很火的 Tailwind CSS 制作者引導。

          Tailwind CSS 可以打開你編寫樣式的新大門,感興趣可以了解下。

          特性?

          • 開源(免費使用)
          • 可通過 NPM 包安裝
          • 可直接復制 SVG 代碼 ?
          • 圖標制作精美
          • 社區強大

          5. CSS Icons

          此開源的圖標可支持僅純CSS代碼編寫,也可支持其它不同的形式,如:SVG, Figma等。如果你在站點性能上追求極致,推薦你使用這個庫。它的存CSS代碼的編寫,能減少額外的圖標請求鏈接的請求。??

          特性?

          • 開源(免費使用)
          • 可通過 NPM 包安裝
          • 可通過 CDN 引用
          • 圖標制作精美
          • 圖標可以僅通過 CSS 完成,使得你項目性能更高

          當然還有很多的圖標庫可以推薦給大家,但是,上面的 5 個已經很好并且已經夠用了。讀者可以選擇適合自己的圖片庫去使用。

          后話

          • 原文:Top 5 Best Javascript Icons Libraries

          主站蜘蛛池模板: 久久亚洲一区二区| 国产一区二区精品尤物| 久久精品中文字幕一区| 亚洲一区二区三区91| 色妞AV永久一区二区国产AV| 美日韩一区二区三区| 亚洲日本乱码一区二区在线二产线| 后入内射国产一区二区| 在线电影一区二区| 91麻豆精品国产自产在线观看一区 | 免费无码一区二区三区蜜桃| 冲田杏梨AV一区二区三区| 成人免费观看一区二区| 亚洲一区二区三区首页| 久久99热狠狠色精品一区| 国产免费播放一区二区| 亚洲国产高清在线一区二区三区| 成人无号精品一区二区三区| 欧美一区内射最近更新| 国精产品999一区二区三区有限 | 国产激情一区二区三区四区| 亚洲日本va一区二区三区| 竹菊影视欧美日韩一区二区三区四区五区| 久草新视频一区二区三区| 国产成人精品视频一区二区不卡| 亚洲线精品一区二区三区 | 一区二区国产在线观看| 一区二区三区亚洲视频| 中文字幕亚洲一区二区三区| 久久精品国产一区二区电影| 国产一区二区三区精品视频| 国产亚洲一区二区手机在线观看| 国产一区二区电影在线观看| 性色av一区二区三区夜夜嗨| 2022年亚洲午夜一区二区福利| 无码国产精品一区二区免费虚拟VR | 精品一区中文字幕| 国产精品小黄鸭一区二区三区 | 性色av闺蜜一区二区三区| 波多野结衣一区二区三区高清在线| 精品中文字幕一区在线|