您正在尝试从Heroicons v1导入`@海洛因/‘re/outline/SearchIcon`’，但已经安装了Heroicons v2。安装`@英雄主义者/反应@v1‘

Question

我一直在尝试使用英雄主义者，并不断地面对错误--我试着安装了‘@海洛因/ keep @v1’，我尝试从“@海洛因/keep/outline”和“@海洛因/keep/24/outline”中导入，它有时在电话上工作，如果我在电话上也不再刷新它。我试着单独使用命令提示符，也没有多大帮助。它不停地说：

服务器错误:您试图从Heroicons v1导入v1，但已经安装了Heroicons v2。安装@heroicons/react@v1以解决此错误。

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

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

Answer 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

Answer 2

安装@海洛因/react@v1以解决此错误。npm i @heroicons/react@v1