1. 首頁
    2. >>
  2. 筆記 Notes
    3. >>
  3. [指南] Heroicons 開源免安裝 直接複製貼上的 SVG 圖示

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

Posted onAuthorANDY LIEN

章節連結

在網頁開發時，視情況會需要載入一些圖示，像是俗稱漢堡選單的 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。

按讚加入粉絲團

延伸閱讀