Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

如果在開發網站、應用程式或軟體專案時需要讀取中的動態圖示,UI Ball 有個名為「Loaders」網站收錄 24 種類型獨特、可自訂且輕量化的載入動態圖,Loaders 也是一個 React.js 套件資料庫,打開網站就能在線上直接預覽這些很眼熟的動畫圖,對於要取用拿去開發專案來說非常有用,也不用上網到處尋找動態圖,Loaders 所有動態圖示都有提供對應的 React、HTML 和 CSS 原始碼。

Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

微軟(Microsoft)釋出超過 4000 個開放原始碼免費圖示Fluent UI System Icons」,一系列大家都感到熟悉、友好和現代化的圖案設計,不過在 GitHub 取用這些圖案、瀏覽上並不是很方便,因此有國外開發者另外開發了一個「Fluenticons」網站做為 Microsofts fluent icons 檢視器,透過這個工具就能在線上預覽、搜尋特定的圖示圖案,也能切換淺色或深色背景,讓下載圖示變得更簡單。

React Tetris 在手機瀏覽器玩經典「俄羅斯方塊」免安裝應用程式

React Tetris 在手機瀏覽器玩經典「俄羅斯方塊」免安裝應用程式
Copyright: alexandrmusuc / 123RF Stock Photos

小時候很流行掌上型俄羅斯方塊(Tetris)遊戲機,只要放兩顆三號電池就能開始玩,也能隨時暫停、靜音或調整難易度,後來才知道俄羅斯方塊是蘇聯的電腦工程師設計,也是目前全世界第二暢銷的電子遊戲(僅次於當個創世神 Minecraft),其經典的配樂是俄羅斯民歌《貨郎》,大家應該都可以哼上幾段旋律吧!俄羅斯方塊是由七種四格骨牌組成,當某一行被填滿時就會消除並轉為得分。

SVG Viewer 線上檢視、最佳化 SVG 圖形,亦可轉檔 PNG 或 React 格式

SVG Viewer 線上檢視、最佳化 SVG 圖形,亦可轉檔 PNG 或 React 格式

經常在網頁上看到 JPG、PNG、GIF 和 SVG 圖片格式,大家可能對於前三種比較有概念,SVG 是可縮放向量圖形(Scalable Vector Graphics)縮寫,也就是使用「可延伸標記式語言」(XML)來描述圖形,因此 SVG 也是普通的文字格式,打開後會看到程式碼,亦可使用一般文字編輯器檢視或修改,如果要瀏覽通常會以最新的網頁瀏覽器開啟,SVG 格式的特色是不會因為放大縮小導致圖片失真。

Iconic 用心設計的免費 SVG 圖示集,每週更新加入新圖案

Iconic 用心設計的免費 SVG 圖示集,每週更新加入新圖案

如果你想製作網站或開發應用程式,可能會需要一套簡單、好看且易用的圖示素材,除了不需要重新開發圖示,也會提供明確授權方式標示出適用範圍,例如之前推薦過的 Radix IconsSystem UIconsBasicons 等免費圖示集都很適合使用,現在大多數圖示也都會採 SVG 格式,讓使用者自訂大小、顏色或是進行細部調整,甚至是直接將 SVG 程式碼複製就能套用到網頁中。

IconPark 字節跳動官方免費圖示庫,1400 個 SVG、PNG 圖片格式下載

IconPark 字節跳動官方免費圖示庫,1400 個 SVG、PNG 圖片格式下載

現在很多企業公司或品牌都會將自己開發的設計素材開放出來,像是圖示集、字型或是網頁框架等等,使這些項目可以被更多人使用,或是在開源的情況下創造出更多可能性,當然一方面也能提高被看到的機會。之前介紹過「IBM Plex:IBM 設計免費字型下載,三種字體類型及風格指南」就是其中一個例子,或是 GitHub 釋出的開放原始碼免費圖示 Octicons 也是非常好用的素材庫,如果需要圖示可以直接在網路上搜尋。