0

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:(

4

1 回答 1

0

我重构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, /*...*/}) 导入，我能够准确地知道哪个图标（我尝试导入的图标）被错误命名，从而解决了我的其他问题。

于 2019-04-30T16:14:37.043 回答