试图导入错误：“AiFillMessage”未从“react图标/fa”导出(导入为“MessengerIcon”)

Question

我试图使用react图标，但我得到了这个错误。

我已经使用这两种方式下载了图标

纱线添加反应图标.保存

和

纱线添加反应图标

但他们没有起作用，这让我很困惑。

以下是我使用它们的方式：-

import React, { useState, useEffect, useRef } from "react";
import "./index.css";
import { BsBell as BellIcon } from "react-icons/fa";
import { AiFillMessage as MessengerIcon } from "react-icons/fa";
import { AiOutlineCaretDown as CaretIcon } from "react-icons/fa";
import { AiOutlinePlus as PlusIcon } from "react-icons/fa";
import { BiCog as CogIcon } from "react-icons/fa";
import { GoChevronDown as ChevronIcon } from "react-icons/fa";
import { AiOutlineArrowDown as ArrowIcon } from "react-icons/fa";
import { AiOutlineThunderbolt as BoltIcon } from "react-icons/fa";

import { CSSTransition } from "react-transition-group";

const App = () => {
  return (
    <Router>
      <Navbar />
      <Navbar2>
        <NavItem icon={<PlusIcon />} />
        <NavItem icon={<BellIcon />} />
        <NavItem icon={<MessengerIcon />} />
        <NavItem icon={<CaretIcon />}>
          <DropdownMenu></DropdownMenu>
        </NavItem>
      </Navbar2>
      <Routes>
        <Route path="/memory" element={<Memory />} />
        <Route
          path="/"
          element={
            <>
              <AMBox />
              <Experience />
              <Projects />
              <Education />
            </>
          }
        />
      </Routes>
    </Router>
  );
};

谢谢

Answer 1

对问题变化的答复：

蚂蚁图标需要导入从蚂蚁图标文件夹，而不是字体可怕的一个。试试这个：

import { AiFillMessage as MessengerIcon } from "react-icons/ai";

你需要为所有的蚂蚁图标这么做。

原文(不再相关)。

我在react应用程序中使用了react图标和我自己的svgs。我想你可能会对反应图标包感到困惑。要使用react应用程序中的图标，您需要的内容如下：

import { FaBell } from 'react-icons/fa';

const App = () => {
    return (
        <Router>
            <Navbar>
              <NavItem><FaBell/></NavItem>
            </Navbar>
        </Router>
}

使用自己的svgs是另一回事。它需要设置webpack或使用其他js包。这也取决于你使用的是创建-反应-应用程序还是香草webpack。有许多指南和文档取决于您的设置。