今天介紹 UnoCSS 的精華之一，Preset-icons 可以用 class name 來快速套用各種 icon，大幅減少尋找、引用 icon 的時間，是超級推薦的功能，如果有興趣使用 UnoCSS，就一定要試試這個功能。

Preset-icons 使用 Iconify 作為 icon 的圖庫，Iconify 集合了各種免費 icon 圖庫，只要不是設計師特別設計的 icon 幾乎都能在這邊找到，下面就來介紹如何使用這個強大的功能。

安裝 Preset-icons

npm i -D @unocss/preset-icons

安裝圖庫套件

1. 先到 Iconify 尋找需要的圖庫源，可以在頁面上方的搜尋列直接搜尋需要的名稱或是點選右上方導覽列左邊第一個照片圖樣的按鈕。
   
2. 這邊示範搜尋了「Globe」關鍵字，並且找到許多 icon。
3. 點選喜歡的 icon，下方會出現對應的 class name，下圖中的範例 class name 是emojione-monotone:globe-showing-americas
   
4. 安裝這個圖庫的套件，將下方的指令 [the-collection-you-want] 這段文字換成上個步驟中 冒號（:） 前方對應的圖庫名稱

npm i -D @iconify-json/[the-collection-you-want]

以這邊的範例來做，修改後的安裝指令是

npm i -D @iconify-json/emojione-monotone

5. 如果覺得一個一個裝太麻煩也可以直接裝全部，但是大約會佔用 100多MB 的空間

npm i -D @iconify/json

使用 icon

使用方式非常簡單，在一個標籤的 class 先寫上前綴詞 i-，接著加上找的的 icon 的 class name，接著把符號 : 改為 - 即可，以上個段落的範例來做，會像以下程式碼：

<div class="i-emojione-monotone-globe-showing-americas"></div>

接著執行專案，就會發現 icon 跑出來啦！

icon 樣式調整

尺寸：可以用 text-sm~xl 文字屬性來修改大小，也可以用 scale 來縮放。
顏色：用 text-[color] 用文字的方式調整顏色樣式。
其他：icon 也可以搭配 dark: hover: 等產生變化效果。

全 icon 的預設樣式

可以在 UnoCSS 的 config 中設定 icon 的基本樣式，下面的官方範例是讓 icon 變成行內元素。

presetIcons({
  extraProperties: {
    'display': 'inline-block',
    'vertical-align': 'middle',
    // ...
  },
})

更多操作的細節可以閱讀 @unocss/preset-icons