🎨
svg icon search,
SVG 圖示搜尋
搜尋 Lucide 與 Heroicons——點擊複製 SVG、React 或 Vue 程式碼。
自訂大小、顏色與線條寬度。
🔍
多庫搜尋
跨 Lucide 與 Heroicons 搜尋
📋
一鍵複製
立即複製 SVG/React 程式碼
🎨
可自訂
調整大小、顏色與線條寬度
|授權:Lucide (ISC) / Heroicons (MIT)
已選擇圖示
🔒所有操作皆完全在您的瀏覽器中執行。
about,
關於本工具
「SVG 圖示搜尋」讓您可以搜尋 Lucide 和 Heroicons 圖示集,並一鍵複製 SVG 程式碼。您可以自訂大小、顏色與線條寬度,並產生可隨插即用的 React 或 Vue 元件程式碼。所有操作皆在您的瀏覽器中執行,無需任何網路請求。
how to use,
使用方法
STEP 1
依名稱搜尋
輸入關鍵字 (如 arrow, home 等) 來過濾圖示。
STEP 2
選擇與自訂
點擊圖示,然後調整大小、顏色與線條寬度。
STEP 3
複製程式碼
直接將 SVG、React 或 Vue 程式碼複製到您的專案中。
glossary,
名詞解釋
- SVG (Scalable Vector Graphics)
- 基於 XML 的向量圖片格式,縮放不失真,非常適合網頁使用。
- Lucide
- 包含 1500+ 個圖示的開源 SVG 圖示集。採 ISC 授權。
- Heroicons
- Tailwind CSS 團隊設計的 SVG 圖示。採 MIT 授權。
- viewBox
- 定義座標系統的 SVG 屬性,確保正確縮放。
- stroke-width
- 控制圖示線條的粗細。
- currentColor
- SVG 關鍵字,可繼承 CSS 顏色值用於 stroke/fill。
faq,
常見問題
- Q.這些圖示的授權為何?
- Lucide 採 ISC 授權,Heroicons 採 MIT 授權。兩者皆可免費作為商業用途。
- Q.資料會傳送到伺服器嗎?
- 不會。所有操作都在您的瀏覽器中執行。
use cases,
使用場景
🎨
網頁設計
為 UI 專案尋找完美的圖示。
💻
React 專案
立即複製元件匯入程式碼。
📐
設計草圖
在加入 Figma 之前預覽圖示。
📚
圖示庫比較
並排比較 Lucide 與 Heroicons。
發送反饋
請告訴我們您的想法,以幫助我們改進工具。
反饋發送成功。感謝您的合作!
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.