来自react-icons的图标，带有类名而不是组件

Question

React Icons 有没有办法将我的图标指定为字符串，例如类名？

目前我正在使用 React UI 库，它需要将图标的名称作为其类传递。

我知道你可以使用react-icons来使用图标，如下所示：

<FaArrowLeft/>

但是，我需要以下图标名称：“fa-arrow-left”。

有什么方法可以获取类名而不是使用组件吗？

Answer 1

我没有专门使用 React Icons，但我通过使用 bootstrap 和 font-awesome 得到了你想要的结果。 在您的项目中安装 bootstrap 和 font-awesome。

yarn add bootstrap
yarn add font-awesome

或者

   npm install bootstrap
   npm install font-awesome

导入它们（我导入到我的index.js文件，但你的应用程序的根目录在哪里）

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';

然后你可以使用类名

'fa fa-sm fa-eye'

例如获得一个小眼睛图标。

Answer 2

我不确定您正在使用哪个库，但我假设它是“react-icons/fa”。可以通过字符串使用它，但是在导入它们之后，这可能会额外影响您的包大小约 30MB，这可不是小尺寸。 这是如何使用自定义组件执行此操作的示例：

 import * as Icons from "react-icons/fa";
    
    const CustomFaIcon = ({ name }) => {
      const FaIcon = Icons[name];
      if (!FaIcon) return <p>Icon not found!</p>;
    
      return <FaIcon />;
    };
    
    export default function App() {
      return (
        <div className="App">
          <CustomFaIcon name="Your String" />
        </div>
      );
    }

我还建议您查看react-fontawesome库，如果您正确使用它，您最终可能会得到较小的包大小，在这里您可以找到一些如何做到这一点的示例： https://github.com/FortAwesome/react-fontawesome/blob/master/examples/create-react-app-typescript/src/App.tsx

Answer 3

我创建文件 utils.js 并添加以下代码：

import React from 'react';

import * as ai from "react-icons/ai";
import * as bi from "react-icons/bi";
import * as bs from "react-icons/bs";
import * as cg from "react-icons/cg";
import * as ci from "react-icons/ci";
import * as di from "react-icons/di"
import * as fa from "react-icons/fa"
import * as fa6 from "react-icons/fa6"
import * as fc from "react-icons/fc"
import * as fi from "react-icons/fi"
import * as gi from "react-icons/gi"
import * as go from "react-icons/go"
import * as gr from "react-icons/gr"
import * as hi from "react-icons/hi"
import * as hi2 from "react-icons/hi2"
import * as im from "react-icons/im"
import * as io from "react-icons/io"
import * as io5 from "react-icons/io5"
import * as lia from "react-icons/lia"
import * as lu from "react-icons/lu"
import * as md from "react-icons/md"
import * as pi from "react-icons/pi"
import * as ri from "react-icons/ri"
import * as rx from "react-icons/rx"
import * as si from "react-icons/si"
import * as sl from "react-icons/sl"
import * as tb from "react-icons/tb"
import * as tfi from "react-icons/tfi"
import * as ti from "react-icons/ti"
import * as vsc from "react-icons/vsc"
import * as wi from "react-icons/wi"

const libs = {
    "ai":ai,
    "bi":bi,
    "bs":bs,
    "cg":cg,
    "ci":ci,
    "di":di,
    "fa":fa,
    "fa6":fa6,
    "fc":fc,
    "fi":fi,
    "gi":gi,
    "go":go,
    "gr":gr,
    "hi":hi,
    "hi2":hi2,
    "im":im,
    "io":io,
    "io5":io5,
    "lia":lia,
    "lu":lu,
    "md":md,
    "pi":pi,
    "ri":ri,
    "rx":rx,
    "si":si,
    "sl":sl,
    "tb":tb,
    "tfi":tfi,
    "ti":ti,
    "vsc":vsc,
    "wi":wi,
};

const GetIcon = ({lib, name}) => {
    const lib_ = libs[lib];
    console.log(lib_)
    if (!lib_) throw Error(`lib ${lib} - Not found`);
    const Icon = lib_[name];
    console.log(Icon)
    if (!Icon) throw Error(`Icon ${lib} ${name} - Not found`);
    return < Icon />;
};

export default GetIcon;

我是这样用的：

import React from 'react';
import GetIcon from "./utils"
    const app = () => {
        return (
            <div>
                < GetIcon lib="bi" name="BiLockAlt" />
            </div>
        );
    };

export default app;