这将解决您的问题。

npm i @heroicons/react

这个问题已经解决了，我只是想为新手添加一些东西。heroicons在GitHub上有清晰的文档。

**React：**首先，从npm安装@heroicons/react：

npm install @heroicons/react

现在，每个图标都可以作为React组件单独导入：

import { BeakerIcon } from '@heroicons/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

Vue请注意，此库当前仅支持Vue 3。

首先，从npm安装@heroicons/vue：

npm install @heroicons/vue

现在，每个图标都可以作为Vue组件单独导入：

<template>
  <div>
    <BeakerIcon class="h-5 w-5 text-blue-500"/>
    <p>...</p>
  </div>
</template>

<script>
import { BeakerIcon } from '@heroicons/vue/solid'

export default {
  components: { BeakerIcon }
}
</script>

降级到1.0.6帮我解决了

yarn add @heroicons/react@1.0.6

对于最近遇到问题的任何人，您需要：

import {} from '@heroicons/react/24/outline'

24或20是heroicons网站上指定的图标原始大小

可能是因为安装的版本是v2 heroicons。请尝试安装heroiconsv1。

npm install heroicons-react

安装后使用：
npm install @heroicons/react
使用了
npm audit fix --force

测试此命令npm install heroicons-react或添加

"@hookform/resolvers": "^0.1.0"

添加到您的package.json

维护者最近发布了一个更新，它弄乱了以前版本中使用的导入。我希望他们能让这个版本更容易适应消费者。
无论如何，现在还需要在import语句中定义大小。
先前版本导入：
从“@ hericons/react/outline”导入{}
从“@ hericons/react/solid”导入{}
最新版本导入：
从“@ hericons/react/24/outline”导入{}
从'@ hericons/react/20/solid'导入{}