1

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?

Adam
  • 25,960
  • 22
  • 158
  • 247

1 Answers1

6

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)

Adam
  • 25,960
  • 22
  • 158
  • 247
  • 1
    this solution works for me to using Nuxt 3 and Vue 3, I had to change to @heroicons/vue/24/outline/index.js and to @heroicons/vue/20/solid/index.js – Abraham Felix Nov 28 '22 at 18:33