介紹

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

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎用法

通過 ?name? 屬性來指定需要使用的圖標，Vant 內置了一套圖標庫（見右側示例），可以直接傳入對應的名稱來使用。

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

使用圖片 URL

你也可以直接在 ?name? 屬性中傳入一個圖片 URL 來作為圖標。

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

徽標提示

設置 ?dot? 屬性后，會在圖標右上角展示一個小紅點；設置 ?badge? 屬性后，會在圖標右上角展示相應的徽標。

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

圖標顏色

通過 ?color? 屬性來設置圖標的顏色。

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

圖標大小

通過 ?size? 屬性來設置圖標的尺寸大小，可以指定任意 CSS 單位。

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

自定義圖標

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

/* 引入第三方或自定義的字體圖標樣式 */
@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';
}

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

API

Props

Events

類型定義

組件導出以下類型定義：

import type { IconProps } from 'vant';