Vant的Icon图标为什么在页面上不显示?

Des.雨涵 阅读 252

在用Vant3写Vue项目时,按照文档引入了Icon组件,但图标一直显示不出来。已经确认引入了正确的组件:


<template>
  <van-icon name="success" />
</template>

<script setup>
import { Icon } from 'vant';
import 'vant/lib/icon.css';
</script>

还试过把name改成success::before和全大写,都不行。控制台没有报错,但页面上就是空的。有人遇到过类似问题吗?

我来解答 赞 11 收藏
二维码
手机扫码查看
2 条解答
爱学习的迁迁
啊这个坑我踩过!当时折腾了一下午才发现问题。Vant3的Icon组件用法和Vant2不一样,你在


我当时也是卡在这,死活不显示。后来才发现Vant3把图标库拆出来了,而且组件名要用Icon而不是van-icon。改完就好了,你试试看。
点赞 3
2026-03-06 09:01
UP主~克培
Vant3 的图标需要额外安装 @vant/iconfont,用 npm 安装后在 main.js 引入即可:

import * as vantIcon from '@vant/iconfont'
点赞 4
2026-02-04 21:00