Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 请更改默认前缀_Reactjs_Font Awesome_Font Awesome 5 - Fatal编程技术网

Reactjs 请更改默认前缀

Reactjs 请更改默认前缀,reactjs,font-awesome,font-awesome-5,Reactjs,Font Awesome,Font Awesome 5,我想将默认前缀更改为常规字体 我试过这么做 fontawesome.config = { familyPrefix: "far" }; 但是我仍然需要做一个“far”前缀来让它工作 import React from "react"; import { render } from "react-dom"; import Hello from "./Hello"; import fontawesome from "@fortawesome/fontawesome"; import FontA

我想将默认前缀更改为常规字体 我试过这么做

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"));
从“React”导入React;
从“react dom”导入{render};
从“/Hello”导入Hello;
从“@fortawesome/fontawesome”导入fontawesome;
从“@fortaweasome/react fontaweasome”导入Fontaweasome图标;
从“@fortawesome/fontawesome free regular/faCalendar”导入faCalendar;
从“@fortawesome/fontawesome free regular/faSquare”导入faSquare;
fontawesome.config={
familyPrefix:“远”
};
Fontsome.library.add(faCalendar、faSquare);
常量样式={
fontFamily:“无衬线”,
textAlign:“居中”
};
常量应用=()=>(
开始编辑以查看发生的奇迹{“\u2728”}
最喜欢的饮料不起作用
图标来自常规工作
);

render(

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

在源代码分析之后,我可以说前缀为
fa
的图标被解析为属于
font-family:solid
的图标,并且
'fa'
前缀在这里被硬编码():


您仍然可以选择为您的项目自定义组件的源代码(我的意思是您可以将
前缀=\u params$prefix===未定义的?'fa':\u params$prefix
替换为
前缀=\u params$prefix==未定义的?'far':\u params$prefix
)但是我不推荐这种方法,因为它对我来说是一种预期的行为。

我认为这是预期的行为。FontAwesome的默认前缀是
fa
,您正在将其更改为
far
。因此
far-square
可以工作,但是
fa-square
square
不能。顺便说一句,我很惊讶一个简单的标志性字体是如何演变而来的在过去的几年里,我做了一些更大的、有自己特色的事情。我有办法让它工作吗?我假设,这会改变默认设置,现在可以使用“Font Awesome Regular”中的图标,不带前缀。我不知道。你试过
fontawesome.config={familyPrefix:“}
?将尝试。但我需要能够将Font Awesome常规设置为默认设置,并使用它并使其正常工作。现在它将Font Awesome Solid设置为默认设置
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);
}