我想将默认前缀更改为字体真棒常规所以尝试做
fontawesome.config = {
familyPrefix: "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
恐怕通过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
(,但我不推荐这种方法,因为它对我来说看起来像代码气味。