您正在尝试从 Heroicons v1 导入“@heroicons/react/outline/SearchIcon”，但安装了 Heroicons v2。安装`@heroicons/react@v1`答案

【问题标题】：You're trying to import `@heroicons/react/outline/SearchIcon` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/react@v1`您正在尝试从 Heroicons v1 导入“@heroicons/react/outline/SearchIcon”，但安装了 Heroicons v2。安装`@heroicons/react@v1`
【发布时间】：2022-12-16 04:40:13
【问题描述】：

我一直在尝试使用 heroicons 并一直面临错误我尝试安装'@heroicons/react@v1'，我也尝试从“@heroicons/react/outline”和“@heroicons/react/24/outline”导入，它有时可以在手机上使用，如果我刷新它甚至在手机上也不会。我尝试单独使用命令提示符，也没有太大帮助。它一直在说：

服务器错误错误：您正在尝试从 Heroicons v1 导入 @heroicons/react/outline/SearchIcon 但安装了 Heroicons v2。安装@heroicons/react@v1 来解决这个错误。

生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。资源 components\Header.js (35:25) @ 标题

import React from 'react'
import Image from 'next/image'
import {
    SearchIcon,
    PlusCircleIcon,
    UserGroupIcon,
    HeartIcon,
    PaperAirplaneIcon,
    MenuIcon
} from "@heroicons/react/outline";
import {HomeIcon} from "@heroicons/react/solid"

function Header() {
  return (
    <div className='shadow-sm border-b bg-white sticky top-0 z-50'>
        <div className='flex justify-between max-w-6xl mx-5 lg:mx-auto'>
            {/* Left */}
            <div className="relative hidden lg:inline-grid h-24 w-24 cursor-pointer">
                <Image src="https://links.papareact.com/ocw" 
                layout="fill" 
                objectFit='contain'
                />
            </div>
            <div className="relative w-10 lg:hidden flex-shrink-0 cursor-pointer">
                <Image src="https://links.papareact.com/jjm" 
                layout="fill" 
                objectFit='contain'
                />
            </div>

            {/* Middle */}
            <div className='max-w-xs'>
                <div className='relative mt-1 p-3 rounded-md '>
                    <div className='absolute insert-y-0 pl-3 flex items-center pointer-events-none pt-2.5'>
                        <SearchIcon className='h-5 w-5 text-gray-500'/> 
                    </div>
                    <input className="bg-gray-50 w-full pl-10 sm:text-sm border-gray-300 focus:ring-black focus:border-black rounded-md"            type="text" placeholder='Search'/>
                </div>
            </div>
            
            {/* Right */}
            <div className='flex items-center justify-end space-x-4'>
                <MenuIcon className='h-6 w-6 md:hidden cursor-pointer'/>
                <HomeIcon className='navBtn'/>
                <div className='relative navbtn'>
                    <PaperAirplaneIcon className='navBtn rotate-45'/>
                    <div className='hidden first-letter:absolute -top-1 -right-2 text-xs w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-white'>3</div>
                </div>
                <PlusCircleIcon className='navBtn'/>
                <UserGroupIcon className='navBtn'/>
                <HeartIcon className='navBtn'/>
                <img src='https://media.newstracklive.com/uploads/entertainment-news/bollywood-news/Nov/18/big_thumb/rajpal-yadav-3_5dd2562ba99a5.jpg' alt="profile pic" 
                className='hidden h-10 w-10 rounded-full cursor-pointer'/>
            </div>
        </div>
    </div>
  )
}

export default Header

【问题讨论】：

我尝试安装 '@heroicons/react@v1'.那你安装了吗？
是的，仍然说同样的话
如果你想了解更多，这是我的 Skype。直播：.cid.53db31c4d7f5c85c

标签： reactjs next.js heroicons

【解决方案1】：

SearchIcon在@heroicons/react/@v2中被称为MagnifyingGlassIcon。

因此，使用 MagnifyingGlassIcon 实现相同的功能。

额外提示：像这样导入 =>

import {iconName} from "@heroicons/react/24/solid";
// or
import {iconName} from "@heroicons/react/24/outline";
// 24 denotes 24x24 sized icons newly released by heroicons

【讨论】：

【解决方案2】：

安装@heroicons/react@v1 来解决这个错误。 npm i @heroicons/react@v1

【讨论】：

我已经安装了它，仍然说同样的话

【解决方案3】：

如果有人遇到同样的问题，这可能会有所帮助，如果组件名称未在更高版本中重命名。 Source

您必须在导入中添加尺寸 (import { SearchIcon } from '@heroicons/react/24/outline')。

你可以在这里阅读：https://github.com/tailwindlabs/heroicons#react

【讨论】：