作為前端，經(jīng)常免不了使用圖標(biāo)的時候，尤其當(dāng)自己業(yè)余開發(fā)項目，自己又沒有設(shè)計做圖的能力。而使用網(wǎng)上開源的圖標(biāo)是我們常見的一種做法。今天介紹一個圖標(biāo)網(wǎng)站，官網(wǎng)：https://heroicons.com/，目前已收集292個純手繪的常見場景的圖標(biāo)，而且是 SVG 矢量格式，它的好處是可以任意放大縮小而不影響圖標(biāo)的質(zhì)量。由 Tailwind CSS 開發(fā)人員制作而成。
官網(wǎng)中每種圖標(biāo)分別有線框圖和實心圖，縮小版三種選擇：
線框圖：24 x 24 像素長寬，1.5 像素描邊，常用于導(dǎo)航或營銷活動場景的應(yīng)用
實心圖：24 x 24 像素長寬，實體填充，常用于導(dǎo)航或營銷活動場景的應(yīng)用
縮小版：20 x 20 像素長寬，實體填充，常用于頁面中很小元素如：按鈕、表單元素和支持輔助文本
當(dāng)鼠標(biāo)移動到圖標(biāo)上，可復(fù)制出 SVG 代碼，保存成 SVG 格式的文件，可在前端代碼中直接使用。
如果你有改變圖標(biāo)顏色的需求，可以在代碼中找到 fill 顏色填充屬性，來改變當(dāng)前的顏色值。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M9.664 1.319a.75.75 0 01.672 0 41.059 41.059 0 018.198 5.424.75.75 0 01-.254 1.285 31.372 31.372 0 00-7.86 3.83.75.75 0 01-.84 0 31.508 31.508 0 00-2.08-1.287V9.394c0-.244.116-.463.302-.592a35.504 35.504 0 013.305-2.033.75.75 0 00-.714-1.319 37 37 0 00-3.446 2.12A2.216 2.216 0 006 9.393v.38a31.293 31.293 0 00-4.28-1.746.75.75 0 01-.254-1.285 41.059 41.059 0 018.198-5.424zM6 11.459a29.848 29.848 0 00-2.455-1.158 41.029 41.029 0 00-.39 3.114.75.75 0 00.419.74c.528.256 1.046.53 1.554.82-.21.324-.455.63-.739.914a.75.75 0 101.06 1.06c.37-.369.69-.77.96-1.193a26.61 26.61 0 013.095 2.348.75.75 0 00.992 0 26.547 26.547 0 015.93-3.95.75.75 0 00.42-.739 41.053 41.053 0 00-.39-3.114 29.925 29.925 0 00-5.199 2.801 2.25 2.25 0 01-2.514 0c-.41-.275-.826-.541-1.25-.797a6.985 6.985 0 01-1.084 3.45 26.503 26.503 0 00-1.281-.78A5.487 5.487 0 006 12v-.54z" clip-rule="evenodd" />
</svg>
或者可以借助 iconfont 工具在線生成圖標(biāo)字體，這樣可直接通過字體大小顏色的屬性來設(shè)置大小和顏色。
唯一不足的地方，官網(wǎng)沒有通過用途或場景對圖標(biāo)進(jìn)行分類，不是很容易找到，但是可通過搜索欄輸入圖標(biāo)的名稱進(jìn)行篩選。同樣圖標(biāo)需要 Tailwind CSS 框架搭配一起使用，可以看到以上代碼中有 Tailwind CSS 框架中的類名。
詳細(xì)使用可參見 Github 主頁介紹：https://github.com/tailwindlabs/heroicons
