如何修复未找到模块：无法解析 React 应用程序中的“@heroicons/react/solid”？

Question

我正在关注这篇精彩的文章来学习反应。然而，缺少一些重要的部分。

当我在浏览器中打开应用程序时，出现错误

./src/components/Navbar.js 找不到模块：无法解析“@heroicons/react/solid”

显然，我缺少一个模块。我尝试安装它，但到目前为止没有任何帮助。

我试过：

npm install heroicons-react

npm install @react-icons/all-files --save

npm install @iconify/icons-heroicons-solid

npm install @heroicons/vue

文件夹结构如下所示：

project
|
|-package.json
|-node_modules
|-homepage
  |-node_modules
  |-package_json
  |-src
  |-public
  |-README.md

我尝试执行项目目录和主页目录中的命令。不确定我应该使用哪一个。

Navbar.js 中的相关代码如下所示：

import { ArrowRightIcon } from "@heroicons/react/solid";

Answer 1

这将解决您的问题。

npm i @heroicons/react

Answer 2

对于最近遇到麻烦的人，您需要：

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

24 或 20 是 Heroicons 网站上指定的图标的原始尺寸

Answer 3

我的朋友们，如果你想在TypeScript中使用Heroicons V2，只需确保你使用的是正确的路径，如下所示：

import {UserIcon, Bars3Icon} from "@heroicons/react/24/solid"

@heroicons/react/内有24和20 个文件夹，对于 TypeScript，您应该使用这些文件夹。

Answer 4

这个问题已经解决了，我只是想为新人补充一些东西。Heroicons在 GitHub 上有清晰的文档。

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

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。

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

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>

Answer 5

降级到 1.0.6 为我解决了这个问题

yarn add @heroicons/react@1.0.6

Answer 6

维护者最近发布了一个更新，它弄乱了以前版本中使用的导入。我希望他们能让这个版本更容易适应消费者。

无论如何，您现在还需要在导入语句中定义大小。

以前版本导入：

从“@heroicons/react/outline”导入 {}

从“@heroicons/react/solid”导入 {}

最新版本导入：

从“@heroicons/react/24/outline”导入 {}

从“@heroicons/react/20/solid”导入 {}