vant/docs/examples-docs/icon.md

Icon 图标

使用指南

如果你已经按照快速上手中引入了整个ZanUI，以下组件注册就可以忽略了，因为你已经全局注册了ZanUI中的全部组件。

全局注册

你可以在全局注册Icon组件，比如页面的主文件（index.js，main.js），这样页面任何地方都可以直接使用Icon组件了：

import Vue from 'vue';
import { Icon } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/icon.css';

Vue.component(Icon.name, Icon);

局部注册

如果你只是想在某个组件中使用，你可以在对应组件中注册Icon组件，这样只能在你注册的组件中使用Icon：

import { Icon } from '@youzan/zanui-vue';

export default {
  components: {
    'zan-icon': Icon
  }
};

代码演示

基础用法

设置name属性为对应的图标名称即可，以下目前有的所有图标：

:::demo 所有Icon

<zan-icon name="qr-invalid"></zan-icon>
<zan-icon name="qr"></zan-icon>
<zan-icon name="exchange"></zan-icon>
<zan-icon name="close"></zan-icon>
<zan-icon name="location"></zan-icon>
<zan-icon name="upgrade"></zan-icon>
<zan-icon name="check"></zan-icon>
<zan-icon name="checked"></zan-icon>
<zan-icon name="like-o"></zan-icon>
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
<zan-icon name="chat"></zan-icon>
<zan-icon name="shop"></zan-icon>
<zan-icon name="photograph"></zan-icon>
<zan-icon name="add"></zan-icon>
<zan-icon name="add2"></zan-icon>
<zan-icon name="photo"></zan-icon>
<zan-icon name="logistics"></zan-icon>
<zan-icon name="edit"></zan-icon>
<zan-icon name="passed"></zan-icon>
<zan-icon name="cart"></zan-icon>
<zan-icon name="arrow"></zan-icon>
<zan-icon name="gift"></zan-icon>
<zan-icon name="search"></zan-icon>
<zan-icon name="clear"></zan-icon>
<zan-icon name="success"></zan-icon>
<zan-icon name="fail"></zan-icon>
<zan-icon name="contact"></zan-icon>

:::

API

参数	说明	类型	默认值	可选值
name	icon名称	string	''