iT邦幫忙

2022 iThome 鐵人賽

DAY 12
1
自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列 第 12

Day12:Ant Design 裡的 icon

  • 分享至 

  • xImage
  •  

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

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

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
先前專案元件示意圖

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


上一篇
Day11:Ant Design 裡的下拉選單 Dropdown
下一篇
Day13:Ant Design 裡的 Table(part1)
系列文
那些年我用 Ant Design 做過的網頁元件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2022-10-03 13:53:52

這技術對前端來說那是基基本本

我要留言

立即登入留言