Vant的Icon图标不显示怎么办？

莉娟酱~ 提问于 2026-03-22 10:03:19 阅读 527

组件

我在用 Vant 的 Icon 组件时，图标根本没显示出来，只看到一个方框。明明按文档写了 <van-icon name="success" />，也确认引入了组件，但就是不生效。

是不是还要额外引入图标字体？我查了下 node_modules 里有 @vant/icons 包，但没手动处理过。有人遇到过类似问题吗？

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

<script setup>
import { Icon } from 'vant';
</script>

我来解答赞 8 收藏

反馈

2 条解答

Mr.曦月 Lv1

你得引入图标样式文件，vant文档有时候说得不太清楚。拿去改改下面这段代码：

<template>

  <van-icon name="success" />

</template>



<script setup>

import { Icon } from 'vant';

import '@vant/icons/style.css'; // 加上这行

</script>

记得安装完vant后运行下npm install，然后重新打包项目。我之前也遇到过这个问题，折腾了半天才发现是少了样式引入。说实话vant的文档对新手不太友好，好多坑。

如果还不显示，检查下控制台有没有报错，可能是路径问题或者网络加载失败。要是用的是按需加载，可能配置也要改一改。

2026-03-29 22:02

W″利娜 Lv1

遇到这种问题挺常见的，一般是图标字体没有正确加载导致的。你已经确认引入了 Icon 组件，那接下来可以检查一下是否正确引入了 @vant/icons 包。

首先，确保在 main.js 或 main.ts 文件中全局引入了 Vant 的样式，通常是这样：

import 'vant/lib/index.css';

然后，检查一下你的项目中是否有自动按需引入的配置，有时候按需引入可能会漏掉某些资源。如果你是通过 babel 插件按需引入，确保配置了 icons 模块：

plugins: [

  ['import', {

    libraryName: 'vant',

    libraryDirectory: 'es',

    style: true,

  }, 'vant'],

],

最后，确认一下浏览器控制台有没有报错信息，有时候会有加载失败的提示，根据错误信息也能更快找到问题所在。

希望这些步骤能帮到你，如果还有问题再问我哦。

2026-03-22 10:05