Search code examples
reactjsfont-awesomefont-awesome-5

FontAwesome change default prefix


I want to change the default prefix to Font Awesome Regular So tried doing

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

But I still have to do an "far" prefix to make it work

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


Solution

  • I'm afraid the desired behavior is unattainable via FontAwesome component configuration.

    After source code analysis I can say that an icon with prefix fa is resolved as an icon belonging to font-family: solid and 'fa' prefix is hardcoded here (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);
    }
    

    You still have an option to customize source code of the component for your project (I mean you can just replace prefix = _params$prefix === undefined ? 'fa' : _params$prefix with prefix = _params$prefix === undefined ? 'far' : _params$prefix) but I don't recommend this approach since it looks like a code smell to me.