鐵人賽進行到將近一半了，發現好像都沒有介紹到 ANTD 的 icon 怎麼使用，所以今天馬上補上！
如果你開發的專案，有自行製做的圖標，或者大多是不太需要 icon 來做點綴，只是偶而需要幾個而已的狀況，像是上傳鈕你想要一個往上的箭頭，抑或只是 返回鍵你想要一個往左的箭頭等等，那我覺得你不需要額外去 cdn 或整包package的方式去 npm 完整的 icon 套件(像是知名的Font Awesome)，因為你使用的ANTD 裡其實就包含夠用的 icon 了，款式還提供三種呢！
import { CloseOutlined, } from '@ant-design/icons';
const App = () => (
<div>
<CloseOutlined style={{color: '#00a0e9'}} /></div>
<div/>
);
export default App;
因為在ANTD裡的icon都是採用svg的方式去渲染，所以你可以使用style或className去設定它的顏色和大小的value，對於先前就有使用過svg的使用者算是相當方便與好上手。
參數就如同下方程式碼說明，也可以點此連結去看更多官方 api 文件。
| 屬性名稱 | 可以使用的值 | 說明 |
|---|---|---|
| style | CSSProperties | 設定它的顏色和大小的value |
| className | 字串 | 額外拉出去設定的class-name，用於有兩種以上樣式需求很方便 |
| rotate | 數字 | 假設你引用的是箭頭，那你也可以稍微轉一下角度做變化(小聲說IE9是不支援的) |
| twoToneColor | 字串(色碼值) | 喜歡官方提供的兩色對比風格(原預設是藍色的)，卻想要換色系的話，可以給個主色，ANTD這個參數將會幫你自動對比另外一個顏色，讓icon呈現另一種樣貌(要注意只支援hex color) |
上面有提到ANTD提供三種風格的icon供我們使用，分別就是 Outlined, Filled 和 Two Tone 啦～如同字面意義解讀，依序是外框為主、底色為主和雙色風格，當然很多icon package都很多樣，但是雙色風格我覺得其實已經非常夠用了，尤其是製做後台網站，使用 Two Tone icon 再搭配twoToneColor參數，已經可以超簡易的自訂符合系統風格的icon了！
看完上面簡單的介紹後，下面提供我的一些簡單範例，若大家有興趣也可以到線上編輯器裡玩玩看唷！
 |
|---|
| 先前專案元件示意圖 |
那今天分享就到這邊啦，大家明天見。
iThome鐵人賽
看影片追技術