如何将所有相关导入放在一个单独的文件中，并在react应用程序中使用它

Question

我在我的react应用程序中包含了一个fontAwesome库。现在，我正在尝试创建一个与键值对类似的react定义文件。就像下面

icon_def.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas, faMousePointer } from '@fortawesome/free-solid-svg-icons'
import { far, faHandPaper, faLaugh } from '@fortawesome/free-regular-svg-icons'


library.add(fas, faMousePointer)
library.add(far, faHandPaper, faLaugh)

const icon = {
    faMousePointer : ["fas", "mouse-pointer"]
}

现在，是否有可能使用这个跨反应项目。就像下面

<FontAwesomeIcon icon={icon.faMousePointer} className={'hi-c'} />

Answer 1

因此，使用这种方法，您必须导出icon_def.js中的图标，并在您想要使用它时导出它：

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas, faMousePointer } from '@fortawesome/free-solid-svg-icons'
import { far, faHandPaper, faLaugh } from '@fortawesome/free-regular-svg-icons'


library.add(fas, faMousePointer)
library.add(far, faHandPaper, faLaugh)

const icon = {
    faMousePointer : ["fas", "mouse-pointer"]
}
export default icon;

所以当你想要我们的时候

//Sample.js
//assuming icon_def is in the root directory
import icon from "/icon_def" 
.
.
.
<FontAwesomeIcon icon={icon.faMousePointer} className={'hi-c'} />

这是良好的做法。但是，如果希望在浏览器中访问整个应用程序中的图标，也可以这样使用windows对象：

windows.icon = {
    faMousePointer : ["fas", "mouse-pointer"]
}

然后，每当您需要它时：，但是由于它可能会导致与其他库的冲突，因此不建议使用它。