英雄图标没有出现在 TailwindUI 的 chrome 中，但在 Firefox 中出现损坏

Posted 2023-03-07

【中文标题】英雄图标没有出现在 TailwindUI 的 chrome 中，但在 Firefox 中出现损坏

【英文标题】：Heroicons not appearing in chrome for TailwindUI, but appears broken in Firefox

【发布时间】：2021-11-14 19:39:29

【问题描述】：

我购买并安装了 TailwindUI。我复制并粘贴了一个导航组件，只是为了看看它在应用程序中的外观，汉堡菜单和通知铃（都是 Heroicons 的一部分）没有出现。

当我单击菜单应下拉的部分时，它会起作用。但现在只有一个看起来像复选框的小方块。

这是它在 Firefox（移动调试器）中的样子：

在 Safari 上测试，它看起来像 Chrome。

在 node_modules 中，我可以看到英雄图标存在：

该应用使用 Elixir/Phoenix、Vue、Webpack 和 Tailwindcss。

任何人都知道问题是什么或我将如何调试它？

【参考方案1】：

如果您不使用 SVG 语法，则必须使用 npm/yarn 安装并导入 @heroicons/react 包到您的项目中

npm install @heroicons/react

【讨论】：

感谢您的建议。我的 node_modules 中有 vue 安装的 heroicons。

【参考方案2】：

TailwindUI 支持 Vue 3，它似乎不包括 @vue/compat。 @vue/compat 是一种兼容性构建，适用于想要从 Vue 2 迁移到 Vue 3 时。compat 构建（又名迁移构建）应该与 Vue 3 兼容，但我想它对于 TailwindUI 来说仍然不够。