Module not found: error: cannot resolve '@heroicons/vue/24/outline'

Question

Immediately after adding this reference in my vue component I get the error:

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

I am using tailwindcss 3.1.8.

I have executed this:

npm install @headlessui/vue @heroicons/vue

I installed Heroicons version 1.0.6. Why can't I find the icon?

Answer 1

Looks like Heroicons 1.0.6 is outdated. Version 2.0.*

must be obtained by calling

npm install @heroicons/vue@latest

Icon import must be changed from '@heroicons/vue/**' to '@heroicons/vue/24/*'

I also had to replace some old icons with new ones as they may have been renamed or deleted. The new icons can be found at https://unpkg.com/browse/@heroicons/vue@2.0.10/24/outline/ (page https:///vue-hero-icons. netlify.app/ doesn't work because it still contains the old one)