Search code examples
vue.jstailwind-cssheroicons

Module not found: Error: Can't resolve '@heroicons/vue/24/outline'

I get the error message as soon as I add this reference in my vue component:

<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 have version 1.0.6 of heroicons installed. Why is the icon not found?

Solution

  • Looks like heroicons 1.0.6 is outdated. Had to get version 2.0.* by calling

    npm install @heroicons/vue@latest

    Import of icons had to be changed from '@heroicons/vue/**' to '@heroicons/vue/24/*'

    I also had to switch some old icons with new ones, as they may have been renamed or removed. New Icons may be found at https://unpkg.com/browse/@heroicons/vue@2.0.10/24/outline/ (the page https://vue-hero-icons.netlify.app/ does not work as it still contains old ones)