图标 icon

本组件库集合了一套icon图标供以使用

说明

本套icon来自iconfont-阿里巴巴矢量图标库，可以免费商用

使用说明

简单引入

此方法引入一个icon图标，你可以将icon插在任何地方

展开代码

<vi-icon></vi-icon>

图标类型

你可以通过控制type属性定义不同样式的图标

展开代码

<vi-icon type="shanchu" class="my-icon-green"></vi-icon>
<vi-icon type="gengduo" class="my-icon-yellow"></vi-icon>
<vi-icon type="shijian"></vi-icon>
<vi-icon type="shouye" class="my-icon-pink"></vi-icon>

<style>
  .my-icon-green {
    color: var(--vi-green-color2)
  }
  .my-icon-yellow {
    color: var(--vi-yellow-color2)
  }
  .my-icon-pink {
    color: var(--vi-pink-color2)
  }
</style>

这里给出了所有图标的type属性名称 (第一行)

haoyourenzheng好友认证

fenxiang分享

paixu排序

gaishuai概率

huodong活动

jianshao减少

gengduo更多

quanxian权限

duihuan兑换

pinglun评论

faxian发现

lishijilu历史记录

shanchu删除

jihua计划

quan券

qianbao钱包

saoma扫码

shezhi设置

renzheng认证

shouye首页

qushi趋势

shangpin商品

shouji手机

xiazai下载

shanchuhaoyou删除好友

sousuo搜索

xinxi信息

shijian时间

shoucang收藏

shuju数据

tupian图片

xiangji相机

xinyongka信用卡

yingyong应用

shangchuan上传

shipin视频

tianjia添加

dingwei定位

biaoqian标签

bianji编辑

wode我的

dingdan订单

xiaoxi消息

tianjiahaoyou添加好友

yue余额

wenjianjia文件夹

ziliao资料

注意：概率图标在之后的版本中type名会有更改，请注意更新动态

尺寸

通过size属性控制图标的大小，你也可以直接定义元素的font-size自定义字体大小

展开代码

<vi-icon class="my-icon-48px"></vi-icon>
<vi-icon type="big"></vi-icon>
<vi-icon></vi-icon>
<vi-icon type="small"></vi-icon>

<style>
  .my-icon-48px {
    font-size: 48px;
  }
</style>

Props

属性名	描述	类型	默认值