我是否必须从导入中重新列出所有React Font Awesome图标并添加到库中？

Posted 2021-04-09

在library.add函数中重新输入我所有导入的图标似乎很繁琐（并且像一个步枪）。有办法解决这个问题吗？

// font-awesome-library.js

import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faChartBar, faFileAlt, faBalanceScale, faUser, faFutbol, faBuilding,
  faAddressBook, faChartLine, faDatabase, faServer, faLink, faCloudUpload,
  faClipboard, faSlidersH, faChartBar, faUsers
} from '@fortawesome/pro-solid-svg-icons'
import { faFortAwesome} from '@fortawesome/free-brands-svg-icons';

// Re-listing these below seem tedious..
library.add(
  faChartBar, faFileAlt, faBalanceScale, faUser, faFutbol, faBuilding,
  faAddressBook, faChartLine, faDatabase, faServer, faLink, faCloudUpload,
  faClipboard, faSlidersH, faChartBar, faUsers, faFortAwesome, 
);

此外，如果我输入错误（或使用错误的名称，例如faBarChart而不是faChartBar）我在react-fontawesome中得到一个无益的错误：TypeError: Cannot read property 'prefix' of undefined :(

答案

我重构了font-awesome-library.js：

// font-awesome-library.js

import { library } from '@fortawesome/fontawesome-svg-core'
import * as icons from './font-awesome-icons';

Object.keys(icons).forEach(key => {
  try {
    library.add(icons[key]);
  } catch (err) {
    console.log(key);
    debugger; // eslint-disable-line
    throw err;
  }
});

并且只需要在font-awesome-icons.js中枚举一次图标：

// font-awesome-icons.js

export {
  faChartBar, faFileAlt, faBalanceScale, faUser, faFutbol, faBuilding,
  faAddressBook, faChartLine, faDatabase, faServer, faLink, faCloudUpload,
  faClipboard, faSlidersH, faChartPie, faUsers
} from '@fortawesome/pro-solid-svg-icons'
export { faFortAwesome} from '@fortawesome/free-brands-svg-icons';

此外，通过将它们作为对象（{faChartBar, faFileAlt, /*...*/}）导入，我能够确切地知道哪个图标（我尝试导入的图标）被错误地命名，解决了我的另一个问题。