Vant4 Icon 圖標(biāo)

介紹

基于字體的圖標(biāo)集，可以通過(guò) Icon 組件使用，也可以在其他組件中通過(guò) icon 屬性引用。

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Icon } from 'vant';

const app = createApp();
app.use(Icon);

代碼演示

基礎(chǔ)用法

通過(guò) ?name? 屬性來(lái)指定需要使用的圖標(biāo)，Vant 內(nèi)置了一套圖標(biāo)庫(kù)（見(jiàn)右側(cè)示例），可以直接傳入對(duì)應(yīng)的名稱來(lái)使用。

<van-icon name="chat-o" />

使用圖片 URL

你也可以直接在 ?name? 屬性中傳入一個(gè)圖片 URL 來(lái)作為圖標(biāo)。

<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />

徽標(biāo)提示

設(shè)置 ?dot? 屬性后，會(huì)在圖標(biāo)右上角展示一個(gè)小紅點(diǎn)；設(shè)置 ?badge? 屬性后，會(huì)在圖標(biāo)右上角展示相應(yīng)的徽標(biāo)。

<van-icon name="chat-o" dot />
<van-icon name="chat-o" badge="9" />
<van-icon name="chat-o" badge="99+" />

圖標(biāo)顏色

通過(guò) ?color? 屬性來(lái)設(shè)置圖標(biāo)的顏色。

<van-icon name="cart-o" color="#1989fa" />
<van-icon name="fire-o" color="#ee0a24" />

圖標(biāo)大小

通過(guò) ?size? 屬性來(lái)設(shè)置圖標(biāo)的尺寸大小，可以指定任意 CSS 單位。

<!-- 不指定單位，默認(rèn)使用 px -->
<van-icon name="chat-o" size="40" />
<!-- 指定使用 rem 單位 -->
<van-icon name="chat-o" size="3rem" />

自定義圖標(biāo)

如果需要在現(xiàn)有 Icon 的基礎(chǔ)上使用更多圖標(biāo)，可以引入第三方 iconfont 對(duì)應(yīng)的字體文件和 CSS 文件，之后就可以在 Icon 組件中直接使用。

/* 引入第三方或自定義的字體圖標(biāo)樣式 */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
}

<!-- 通過(guò) class-prefix 指定類名為 my-icon -->
<van-icon class-prefix="my-icon" name="extra" />

API

Props

Events

類型定義

組件導(dǎo)出以下類型定義：

import type { IconProps } from 'vant';