雖然網路上有無數免費圖示可以下載使用,卻很少有「量身打造」的選擇,只能盡量找出最符合自己需求的圖示圖案,有些圖示集仍有完整自訂選項,例如 Omg-img 用一段程式碼快速插入圖示,可自訂顏色、大小或樣式,大部分的圖示則會提供一些預設大小讓使用者選擇,例如 Iconshock 收錄超過 200 萬個免費圖示下載,或是 ICOOON MONO 圖示內建七種不同的尺寸大小。

本文要介紹的Ikonate」免費圖示集收錄兩百個圖案,是一套開放原始碼、兼具完整自訂性、易用性和最佳化向量圖示,Ikonate 特色是可直接從線上調整並預覽邊框粗細、大小和樣式(直角或圓角),設定顏色後選擇自己需要的圖案,最後一鍵打包將這些圖示匯出下載,對於開發者或設計師來說幫上不少忙。

Ikonate 提供的格式包括自訂後的 .svg 向量圖檔(適合不想編輯程式碼的開發者)、呈現於 .html 範本中的圖示,還有直接寫成程式碼的範例檔,更多自訂及使用方式可參考專案的 GitHub 頁面,有非常完整詳實的說明。

網站名稱:Ikonate
網站鏈結:https://www.ikonate.com/GitHub

使用教學

STEP 1

開啟 Ikonate 網站後按下「Get Icons」就能看到如下的圖示自訂頁面,主要設定選項在左側,右側則是 Ikonate 完整圖示集,目前數量大約在兩百個左右,透過左上角還能以關鍵字快速查找相關圖案。

使用者可直接從 Ikonate 網站調整圖示邊框粗細、尺寸大小、樣式和顏色,設定後會即時更新顯示新的效果。

STEP 2

設定好後選取要下載的圖示,將左側選單列拉到最下方,按下「Export icons」即可將這些圖示打包匯出,此外,Ikonate 也提供深色模式,如果想知道圖示在深色背景的表現情形可以開啟這個選項切換。

STEP 3

下載後解壓縮就能獲取相關檔案,主要由三個資料夾構成:inlinespritesheetsvg,使用者可從前兩個資料夾獲取 .html 網頁格式,並查看如何在網頁中載入這些 svg 格式圖示,而 svg 資料夾則是選擇下載的所有圖示檔案。

值得一試的三個理由:

  1. 開放原始碼,收錄超過兩百種圖示圖案
  2. 可線上自訂邊框粗細、圖示大小、樣式及顏色
  3. 一鍵打包下載,可為每個圖案產生 .svg 檔案格式