Vue mobile terminal project vant component library icon
<template>
<div class="pd50">
<h3>基础用法</h3>
<van-icon name="chat-o" />
<h3>某一张网络图片资源</h3>
<van-icon name="https://avatar.csdnimg.cn/3/7/B/0_hu1628299958.jpg" />
<h3>徽标提示</h3>
<van-icon name="chat-o" dot />
<van-icon name="chat-o" badge="9" />
<h3>图标颜色</h3>
<van-icon name="cart-o" color="#1989fa" />
<van-icon name="fire-o" color="#ee0a24" />
<h3>图标大小</h3>
<van-icon name="chat-o" size="40" />
<van-icon name="chat-o" size="3rem" />
<h3>HTML 标签</h3>
<!--
由于
.van-icon::before {
display: inline-block;
}
tag 是块级的时候也不会换行
-->
<van-icon name="chat-o" tag="div"/>
<van-icon name="chat-o" tag="span"/>
<h3>class-prefix 自定义icon</h3>
<!--
myIcon 对应一个类名
myIcon 设置背景
-->
<van-icon class-prefix="myIcon" tag="div"/>
</div>
</template>
<script>
import {
Icon } from "vant";
export default {
components: {
vanIcon: Icon,
},
};
</script>
<style lang="scss" scoped>
.myIcon{
background-image: url('../../assets/1.jpg');
border-radius: 50%;
width: 30pt;
height: 30pt;
}
</style>
effect
![Insert picture description here](https://img-blog.csdnimg.cn/20210221182734557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1MTYyODI5OTk1OA==,size_16,color_FFFFFF,t_70)