Icon 图标

引入

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

代码演示

基础用法

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

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

显示徽标

  1. <van-iconname="chat"info="9"/>
  2. <van-iconname="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-iconclass-prefix="my-icon"name="extra"/>

API

Props

参数说明类型默认值版本
name图标名称或图片链接String--
info图标右上角文字提示String | Number--
color图标颜色Stringinherit1.1.3
size图标大小,如 20px2em,默认单位为pxString | Numberinherit2.0.0
class-prefix类名前缀Stringvan-icon1.2.1
tagHTML 标签Stringi1.6.10

Events

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

Icon 图标 - 图1