FontAwesome 更改默认前缀

Question

我想将默认前缀更改为 Font Awesome Regular 所以尝试做

fontawesome.config = {
  familyPrefix: "far"
};

但我仍然需要做一个 "far" 前缀才能使其工作

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import fontawesome from "@fortawesome/fontawesome";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faCalendar from "@fortawesome/fontawesome-free-regular/faCalendar";
import faSquare from "@fortawesome/fontawesome-free-regular/faSquare";

fontawesome.config = {
  familyPrefix: "far"
};

fontawesome.library.add(faCalendar, faSquare);

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing to see some magic happen {"\u2728"}</h2>
    Favorite beverage: <FontAwesomeIcon icon="calendar" /> //does not work
    Icon from regular: <FontAwesomeIcon icon={["far", "square"]} /> //works
  </div>
);

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/40v5jk6no7

Answer 1

恐怕无法通过 FontAwesome 组件配置实现所需的行为。

经过源代码分析后，我可以说带有前缀 fa 的图标被解析为属于 font-family: solid 的图标，并且 'fa' 前缀在此处被硬编码（fontawesome/index.es.js ):

function findIconDefinition(params) {
  var _params$prefix = params.prefix,
      prefix = _params$prefix === undefined ? 'fa' : _params$prefix,
      iconName = params.iconName;

  if (!iconName) return;

  return iconFromMapping(library.definitions, prefix, iconName) || iconFromMapping(namespace.styles, prefix, iconName);
}

您仍然可以选择为您的项目自定义组件的源代码（我的意思是您可以将 prefix = _params$prefix === undefined ? 'fa' : _params$prefix 替换为 prefix = _params$prefix === undefined ? 'far' : _params$prefix），但我不推荐这种方法，因为它看起来对我来说就像 code smell。

FontAwesome 更改默认前缀

FontAwesome change default prefix

font-awesome

reactjs

font-awesome-5