Vant Icon 圖標

介紹

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

引入

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

Vue.use(Icon);

代碼演示

基礎用法

Icon的name屬性支持傳入圖標名稱或圖片鏈接，所有可用的圖標名稱見右側示例

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

提示信息

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

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

圖標顏色

Icon的color屬性用來設置圖標的顏色

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

圖標大小

Icon的size屬性用來設置圖標的尺寸大小，默認單位為px

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

使用本地字體文件

Icon 組件默認引用有贊 CDN 提供的字體文件，并通過網絡下載。如果需要在項目中使用本地字體文件，請引入下面的 CSS 文件，并在項目中配置url-loader

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

自定義圖標

如果需要在現(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