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

章節連結

• 使用方式

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

---

使用方式

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

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

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

按讚加入粉絲團

延伸閱讀

• [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
• [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
• [指南] npm 預設下載來源更改 – 因應中國的特殊規矩
• [指南] 解決中國境內無法使用 raw.githubusercontent.com 下載套件的問題
• [筆記] Lodash 比較物件 Object 是否更動的一些細節