[指南] Heroicons 開源免安裝 直接複製貼上的 SVG 圖示

章節連結

在網頁開發時,視情況會需要載入一些圖示,像是俗稱漢堡選單的 Menu、箭頭符號之類的。若先下載一大包的資料,最後只用上一點點,對於頻寬消耗來說是種無謂浪費。Heroicons 提供好用的圖示,直接複製 SVG 或是 JSX 程式碼,貼上應用即可。
heroicons logo


使用方式

[Github]:https://github.com/tailwindlabs/heroicons

1. 目前共有約 225 個圖示。你可以直接在下面選取,或是利用上方的搜尋欄輸入關鍵字。
heroicons demo2

Icon,WebDevelopment,圖示,網頁開發2. 預設是複製 SVG 格式。在想要的圖示上直接點選就可以複製完成。
heroicons demo1
3. 若你要切換成 JSX 格式,可以點選右上方的 </> 鈕;若要變成實心版(Solid)的,就點選右上方的盾牌圖示
4. 來 Codepen 玩看看,可以直接對 svg 檔加上 CSS。

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:4