element-plus 使用 svg icon

幾個月前,element plus要使用icon的話,都是用font icon的方式,但是這幾個月有段過渡期,官網說明會漸漸將font icon轉移到svg icon,使用方式也會不同。

先來看一下官網警告:

Element Plus team is replacing all Font Icon in the previously built components to SVG Icon, please keep you eyes on ChangeLog, for getting latest updates, Font Icon will be deprecated after the first stable release.

反正重點就是第一個穩定版出現後,就要把font icon棄用拉!


安裝svg icon

跟以前不同的是,現在如果只安裝了elemen plus是不能直接使用icon的,還要另外安裝@element-plus/icons

$ yarn add @element-plus/icons

安裝好之後,官網有範例碼,直接貼上:

<el-icon :size="size" :color="color">
    <edit></edit>
</el-icon>
<!-- Or use it independently without derive attributes from parent -->
<edit></edit>

這時候就會發現沒有任何東西出現噎!XD

因為他官網上還有一段說明,但是沒有範例碼的,就是要註冊組件:

SvgIcon Usage

If you want to use directly like the example, you need to globally register the components before using it.
If you want to see all available SVG icons please check @element-plus/icons and the source Github/ElementPlus/icons out or SVG icons

註冊組件:

import { Van } from "@element-plus/icons";
export default {
  name: "Home",
  components: { Van },
  setup() {
  },
};

重點來了,我們要怎麼知道他裡面有哪些組件名稱呢?也就是說,我怎知道要匯出Van這個component?

就是要進入官網的SVG Icons collection

element plus 使用 svg icon

此時就可以看到我匯入的icon囉!

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。