基本用法
1. 安装 Vant4 和 Icon 组件：
确保你已经安装了 Vant4 和相关的样式：
npm install vant@next
2. 引入 Icon 组件：
在需要使用 Icon 的组件中，引入 Icon 组件：
<template>
<van-icon name="like-o" />
</template>
常见配置选项
以下是一些常见的 Icon 配置选项：
- name： 图标名称，对应 Vant4 图标库中的图标，例如 'like-o'、'star-o' 等。
<template>
<div>
<van-icon name="like-o" />
<van-icon name="star-o" />
<!-- 更多图标 -->
</div>
</template>
- size： 图标大小，默认为 'inherit'，可以设置为 '16px'、'1em' 等。
<template>
<van-icon name="like-o" size="24px" />
</template>
- color： 图标颜色，默认为 'inherit'，可以设置为 'red'、'#00ff00' 等。
<template>
<van-icon name="like-o" color="#00ff00" />
</template>
- class-prefix： 类名前缀，用于自定义图标的样式。
<template>
<van-icon name="like-o" class-prefix="my-icon" />
</template>
<style>
.my-icon-like-o {
/* 自定义样式 */
}
</style>
这只是 Vant4 中 Icon 图标组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.zyzy.cn/article/detail/5792/Vant