导入图标的方式使用了一个babel宏。这意味着引用的图标必须在构建时已知。它根本不起作用，因为Babel不能确定应该导入什么图标，它只能在运行时完成。这就是为什么它告诉你只支持字符串常量。
所以你需要使用第二种方法，在文档中有解释。你必须在图标和DB中的值之间有某种Map，然后抓取相关的图标。

// not sure about exact import
import { faGoogle } from '@fortawesome/free-brand-svg-icons';

// you'd put all valid values that can come from the backend here
const myIcons = {
  google: faGoogle
}

// ...

const example = 'google';
<FontAwesomeIcon icon={myIcons[example]} />

另一种选择是使用library.add，这里有解释，然后做与上面相同的事情，但使用字符串代替导入的图标，例如google: 'fa-brands fa-google'（同样，这里不确定确切的值）。

以下方法是否有效？

var example = ['fab', 'google'];

<FontAwesomeIcon icon={example} />

P.S.建议在ES6中使用let或const关键字。

//实用工具

const UpperFirst = (sentence) => {
    if (!sentence || (typeof sentence !== 'string')) return null
    return `${sentence.charAt(0).toUpperCase()}${sentence.slice(1)}`
}

//React泛型组件

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import * as solid from '@fortawesome/free-solid-svg-icons'
import * as regular from '@fortawesome/free-regular-svg-icons'
import { UpperFirst } from '@utils'

const GenFontAwe = ({ isReg, customClass, nameIco }) => {
    if (!nameIco) return null
    const finalName = nameIco.split('-').map((cv, ind) => ind === 0 ? cv : UpperFirst(cv)).join('')
    const finalIcon = isReg ? regular[finalName] : solid[finalName]
    if(!finalIcon) return null
    return <FontAwesomeIcon icon={finalIcon} className={customClass || ''} />
}

export default GenFontAwe

//使用方式：

<GenFontAwe nameIco='fa-folder-open' isReg customClass="h1 p-5" />