Skip to content

icon

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

icon

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
test
test
 
 
README.md
README.md
 
 
README.zh-CN.md
README.zh-CN.md
 
 
index.less
index.less
 
 
index.tsx
index.tsx
 
 
local.less
local.less
 
 

README.md

Icon

Install

import { Icon } from 'vant';

Vue.use(Icon);

Usage

Basic Usage

Use name prop to set icon name or icon URL

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

Show Info

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

Use local font file

Icon uses font file in yzcdn.cn by default，if you want to use the local font file，please import the following css file.

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

Add custom iconfont

@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';
}
<van-icon class-prefix="my-icon" name="extra" />

API

Props

Attribute Description Type Default
name Icon name or URL string ''
info Info message `string number`
color Icon color string inherit
size Icon size `string number`
class-prefix ClassName prefix string van-icon
tag HTML Tag string i

Events

Event Description Arguments
click Triggered when click icon event: Event