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

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

组件

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

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

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

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

我来解答赞 5 收藏

反馈

1 条解答

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