鐵人賽進行到將近一半了，發現好像都沒有介紹到 ANTD 的 icon 怎麼使用，所以今天馬上補上！
如果你開發的專案，有自行製做的圖標，或者大多是不太需要 icon 來做點綴，只是偶而需要幾個而已的狀況，像是上傳鈕你想要一個往上的箭頭，抑或只是 返回鍵你想要一個往左的箭頭等等，那我覺得你不需要額外去 cdn 或整包package的方式去 npm 完整的 icon 套件(像是知名的Font Awesome)，因為你使用的ANTD 裡其實就包含夠用的 icon 了，款式還提供三種呢！

一、ANTD Icon 最基本的使用方式：引用與呼叫它

1
2
3
4
5
6
7
8
9
import { CloseOutlined, } from '@ant-design/icons';

const App = () => (
  <div>
    <CloseOutlined style={{color: '#00a0e9'}} /></div>
  <div/>
);

export default App;

二、ANTD Icon 可添加的參數

因為在ANTD裡的icon都是採用svg的方式去渲染，所以你可以使用style或className去設定它的顏色和大小的value，對於先前就有使用過svg的使用者算是相當方便與好上手。
參數就如同下方程式碼說明，也可以點此連結去看更多官方 api 文件。

屬性名稱 可以使用的值 說明
style CSSProperties 設定它的顏色和大小的value
className 字串 額外拉出去設定的class-name，用於有兩種以上樣式需求很方便
rotate 數字 假設你引用的是箭頭，那你也可以稍微轉一下角度做變化(小聲說IE9是不支援的)
twoToneColor 字串(色碼值) 喜歡官方提供的兩色對比風格(原預設是藍色的)，卻想要換色系的話，可以給個主色，ANTD這個參數將會幫你自動對比另外一個顏色，讓icon呈現另一種樣貌(要注意只支援hex color)

三、ANTD Icon 的風格介紹

上面有提到ANTD提供三種風格的icon供我們使用，分別就是 Outlined, Filled 和 Two Tone 啦～如同字面意義解讀，依序是外框為主、底色為主和雙色風格，當然很多icon package都很多樣，但是雙色風格我覺得其實已經非常夠用了，尤其是製做後台網站，使用 Two Tone icon 再搭配twoToneColor參數，已經可以超簡易的自訂符合系統風格的icon了！

四、ANTD Icon 實際使用範例

看完上面簡單的介紹後，下面提供我的一些簡單範例，若大家有興趣也可以到線上編輯器裡玩玩看唷！

https://ithelp.ithome.com.tw/upload/images/20220927/20140920IAfq4dzAV7.png
先前專案元件示意圖

那今天分享就到這邊啦，大家明天見。