找不到模組：錯誤：無法解析'@heroicons/vue/24/outline”

Question

在我的 vue 元件中新增此參考後，我立即收到錯誤訊息：

<script setup>
import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline'

我使用的是 tailwindcss 3.1.8。

我已經執行了這個：

npm install @headlessui/vue @heroicons/vue

我安裝了 Heroicons 1.0.6 版本。為什麼找不到圖示？

Answer 1

看起來 Heroicons 1.0.6 已經過時了。必須透過呼叫取得版本 2.0.*

npm install @heroicons/vue@latest

圖示的導入必須從 '@heroicons/vue/**' 更改為 '@heroicons/vue/24/*'

我還必須將一些舊圖標更換為新圖標，因為它們可能已被重新命名或刪除。新圖示可在 https://unpkg.com/browse 找到/@heroicons/vue@2.0.10/24/outline/（頁 https:///vue-hero-icons. netlify.app/ 不起作用，因為它仍然包含舊的）