Icon 图标

使用指南

  1. import { Icon } from 'vant';
  2. Vue.use(Icon);

代码演示

基础用法

Iconname属性支持传入图标名称或图片链接

  1. <van-icon name="close" />
  2. <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />

显示徽标

  1. <van-icon name="chat" info="9" />
  2. <van-icon name="chat" info="99+" />

使用本地字体文件

Icon 组件默认引用 yzcdn.cn 域名下的字体文件,如果想要使用本地字体文件,请引入下面的 css 文件

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

自定义图标

如果需要在现有 Icon 的基础上使用更多图标,可以引入你需要的 iconfont 对应的 ttf 文件和样式,之后就可以在 Icon 组件中直接使用

  1. @font-face {
  2. font-family: 'my-icon';
  3. src: url('./my-icon.ttf') format('truetype');
  4. }
  5. .my-icon {
  6. font-family: 'my-icon';
  7. }
  8. .my-icon-extra::before {
  9. content: '\e626';
  10. }
  1. <van-icon class-prefix="my-icon" name="extra" />

API

参数说明类型默认值版本
name图标名称或图片链接String--
info图标右上角文字提示String | Number--
color图标颜色Stringinherit1.1.3
size图标大小,如 20px 2emStringinherit1.1.15
class-prefix类名前缀Stringvan-icon1.2.1

Event

事件名说明参数
click点击图标时触发-

原文: https://youzan.github.io/vant/#/zh-CN/icon