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

皇甫振杰提问于 2026-03-19 19:50:18 阅读 4

组件

我用Vant的Icon组件，但页面上啥也没显示出来，控制台也没报错，是不是哪里漏了？

我已经按文档引入了Icon组件，也确认样式文件加载了，但图标就是空白。试过用name属性指定”success”和”close”都不行。

import { Icon } from 'vant';

function MyComponent() {
  return (
    <div>
      <Icon name="success" />
      <Icon name="close" />
    </div>
  );
}

Icon图标 Vant

我来解答赞 3 收藏

反馈

1 条解答

UX-娇娇 Lv1

这个问题很典型，十有八九是图标字体没加载。

Vant的Icon组件本质上是用字体文件渲染图标的，光引入组件和样式没用，得确保图标字体资源能加载到。

解决方案有两种：

第一种方式是CDN引入，在你的index.html的head里加上这个：

第二种方式是使用npm包引入，你需要先装一下：

npm install @vant/icons

然后在入口文件里引入：

import '@vant/icons';

为什么会出现这个问题：

Vant 3.x把图标拆成了独立的包@vant/icons，组件内部实际上是通过加载这个图标字体文件来渲染的。你只引入了Icon组件和Vant的基础样式，但图标字体文件没加载进来，所以渲染出来的是空元素——这就是为什么控制台不报错但页面空白。

顺带确认一下你的Vant版本，如果是2.x版本，CDN地址改成对应版本号就行。另外如果你是用Vite或Webpack这类构建工具，确保postcss配置没问题，有时候样式被过滤了也会导致各种奇怪问题。

先试试加上CDN链接，应该立刻就能显示了。

2026-03-19 20:05