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"));
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.