Lucide 是一個免費且開放原始碼的 SVG 圖示庫,提供的圖示類型有無障礙、帳戶、動物、箭頭、品牌等 40多種類型的圖示,總數達到 1500多個。這些圖示除了提供 SVG 向量格式外,也支援多種 JavaScript 框架及工具,包括:Vanilla、React、Vue、Svelte、Preact、Solid、Angular、Icon Font,除此之外,還能透過 HTML 語法中的 JSX 嵌入,滿足不同開發需求。另外,Lucide 也提供可以客製化這些圖示的工具,使用者可以透過這些工具輕鬆更改圖示顏色、描邊粗細(Stroke Width)、尺寸與開啟絕對值描邊粗細( Absolute Stroke width_)等。Lucide 圖示庫採用 ISC License,簡單來說這些圖示不但可以免費使用,還可以編輯與再分發,非常適合個人專案與商業用途使用。
可客製化及支援各大前端框架與商業使用
1.進入 Lucide 圖示網站,點擊「View all icons」即可瀏覽所有圖示。
2.除了可以使用關鍵字搜尋圖示外,左側 Categories 還有圖示分類可以快速篩選想要的圖示類別。
3.另外在 Customizer 處還提供更改圖示顏色、描邊粗細(Stroke Width)、尺寸等的客製化工具。讓下載的圖示立即就可以與要應用的專案風格一致。
Absolute Stroke width:指將圖示的描邊寬度(Stroke Width)設定為一個固定的絕對值,通常以像素(px)或其他具體單位表示。這意味著無論圖形的尺寸如何變化,描邊的寬度都保持不變。例如,如果將描邊寬度設定為 2px,即使圖形被放大或縮小,描邊仍然維持在 2px 的固定寬度。這種設定方式通常用於確保圖形在多種情境下的一致性顯示,特別適合需要固定細節的圖示或設計。
Include external libs:指在專案或應用程式中引用外部的程式庫(libraries),這些程式庫通常是由第三方開發者或社群提供的現成模組,用於擴展功能或簡化開發。例如,在網頁應用中引入 JavaScript 程式庫(如 React 或 Vue)或圖示庫(如 Lucide)可以快速實現複雜功能。整合外部程式庫的目的是提高開發效率並重複利用現有資源。
4.點選任一圖示,可預覽該圖示。
5.再點擊「See in action」不但可放大預覽,還可以下載該圖示的 SVG 檔案及取得多種 JavaScript 框架及工具,包括:Vanilla、React、Vue、Svelte、Preact、Solid、Angular、Icon Font 的語法。
Lucide 不但有豐富的圖示資源,更為圖示提供客製化工具,讓使用者可以輕鬆調整顏色、描邊寬度與尺寸,輕鬆融入各類型的專案,是一個設計靈活且功能強大的圖示庫。除此之外,Lucide 還支援多種前端框架,如 React、Vue、Angular,以及 Icon Font 等,並可在 JavaScript 中以 JSX 語法直接使用,大幅提升開發效率與靈活性。不論是用於個人專案還是商業應用,Lucide 的免費開源性及 ISC 授權條款讓它成為開發者的理想選擇。