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

Question

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

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

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

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

在 node_modules 我可以看到 heroicons 存在：

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

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

Answer 1

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

npm install @heroicons/react

Answer 2

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