Vant Icon 圖標(biāo)

介紹

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

引入

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

Vue.use(Icon);

代碼演示

基礎(chǔ)用法

Icon的name屬性支持傳入圖標(biāo)名稱或圖片鏈接，所有可用的圖標(biāo)名稱見(jiàn)右側(cè)示例

<van-icon name="chat-o" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />

提示信息

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

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

圖標(biāo)顏色

Icon的color屬性用來(lái)設(shè)置圖標(biāo)的顏色

<van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat-o" color="#07c160" />

圖標(biāo)大小

Icon的size屬性用來(lái)設(shè)置圖標(biāo)的尺寸大小，默認(rèn)單位為px

<van-icon name="chat-o" size="40" />
<van-icon name="chat-o" size="3rem" />

使用本地字體文件

Icon 組件默認(rèn)引用有贊 CDN 提供的字體文件，并通過(guò)網(wǎng)絡(luò)下載。如果需要在項(xiàng)目中使用本地字體文件，請(qǐng)引入下面的 CSS 文件，并在項(xiàng)目中配置url-loader

import 'vant/lib/icon/local.css';

自定義圖標(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