Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

Iconify Design 是一個提供超過 150,000 個開放原始碼的 SVG 向量圖示網站。根據說明,這些圖標圖示在使用上並無特殊限制。使用上除了可以下載單個 SVG 圖示在 HTML 內使用外,亦可以集成到像是 Vue、Svelte 或是 Lit 等 Web 框架內使用。另外,為求運用可以更為靈活,Iconify 的每個圖示圖標都有簡易編輯器,可以更改圖示的顏色、尺寸、方向或旋轉,讓圖示的運用會更加方便。

對於圖標圖示來說,使用傳統的 png、jpg 或 bmp 圖檔常會遇到縮放性問題。這些位圖格式的核心是像素,因此放大或縮小會導致像素失真,使圖片變得模糊或出現鋸齒狀效果。相較之下,SVG 是向量圖形,以數學公式表示圖像,在縮放時不會失真,保持圖片的清晰度和品質。因此,對於需要頻繁縮放的圖標圖示,使用 SVG 格式是一個不錯的選擇。

Iconify Design所提供的 SVG 向量圖示在使用上並無特殊限制,根據說明,大部分均採用 MIT license,但仍有部分是使用 Apache 2.0 或 GPL 2.0 授權,取用時,請留意圖示集內的 License 說明。

§相關文章,還可以參閱:

如何下載與使用 Iconify 所提供的 svg 向量圖示?

1.開啟 Iconify Design網站,點擊「Browse Icons」 就可以開始選擇圖示

Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

在這裡除了可以瀏覽每個圖示集內所提供的 ICON,亦可以輸入關鍵字來搜尋。

Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

2.每個圖示集均有提供其採用的 License 及作者、版本等相關資訊。

Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

3.點擊圖示後,可以對圖示進行包括顏色、尺寸、翻轉或旋轉在內的編輯,最後,可以點擊「Download」下載 svg 圖檔,或直接複製 svg 語法貼到要應用的 HTML 檔案內即可。

Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

4.如果不知道怎麼用,也不用擔心,點擊要使用的 Web 組件,如果是原始的 HTML 就會告訴你在 Web Component、SVG Framework 或是 CSS 裡面要怎麼用。

Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

5.Iconify 提供很詳盡的使用手冊,如果想將 Iconify 的圖示集成到 Web 框架內使用,可以參考。

Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示

整體來說,Iconify 所提供的圖示超過 150,000 個圖示,且多數是使用 MIT 授權,在運用上,每個圖標都可利用編輯器先行編輯顏色、尺寸成成品後,再行運用,而在使用上,除了,直接使用 HTML 或是 CSS 之外,亦可以集成由 JavaScript 所製作的 Web 框架內,相當靈活。

颱風未來會怎麼走?如果能以最直覺的方式呈現當然最好,像是「中央氣象局風場預報顯示圖」網站,就可以在地圖上以風速粒子的動畫效果呈現天氣資訊,遇到有颱風時,也能夠模擬出往後 8天的颱風路徑及其所包含的暴風圈大小,再輔以電子地圖後,就能很清楚的知道即使颱風只在台灣外圍沒登入,但所在縣市會不會被暴風圈所影響。

Windows 內建的「輸入法手寫板」,除了有手寫國字查注音的功能之外,還有個「符號查詢」其提供了豐富的選項,包含標點符號、特殊符號、數學符號、單位符號、繪圖符號、計量符號、注音符號、希臘字母、平假名、片假名等等。如果還嫌不足,還可以使用「Windows 標誌鍵 + .」鍵盤快速鍵,開啟 Windows 內建的 Emoji 及其他樣式的符號,讓特殊符號能有更多的選擇。除此之外,若想探索更多符號,可以前往 https://unicode.org/charts/ 網站進行查詢,這裡收錄了眾多 Unicode 字元符號。複製所需符號,就可以將其插入到文書所需位置。