reactjs 找不到图标 react-fontawesome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48002619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cound not find icon react-fontawesome
提问by iamawebgeek
I have a project on React and I need to integrate FontAwesome to it. I found official libraryand installed it as instructed in readme
我有一个关于 React 的项目，我需要将 FontAwesome 集成到它。我找到了官方库并按照自述文件中的说明安装了它
$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
When I try to use it in my code like this:
当我尝试在我的代码中使用它时：
<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>
I am getting this error on the console:
我在控制台上收到此错误：
Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}
I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1; node v8.9.1; react v16.2.
我尝试将 FontAwesome css 链接包含在头部，但没有帮助。我正在使用npm v4.6.1；node v8.9.1; react v16.2.
回答by Shishir
You need to add any icons you wish to use, to a "library" for easy reference.
您需要将您希望使用的任何图标添加到“库”中以便于参考。
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 { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};
fontawesome.library.add(faCheckSquare, faCoffee);
const App = () => (
<div style={styles}>
<FontAwesomeIcon icon="check-square" /><br /><br />
<FontAwesomeIcon icon="coffee" />
</div>
);
render(<App />, document.getElementById('root'));
Check out working code here: https://codesandbox.io/s/8y251kv448
在此处查看工作代码：https: //codesandbox.io/s/8y251kv448
Also, read this: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
另外，请阅读：https: //www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
回答by J.D. Mallen
Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.
以防万一还有其他像我这样的白痴，请确保在引用图标时使用正确的名称。
I had
我有
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";
library.add(faUser);
and
和
render() {
return (
<FontAwesomeIcon icon="faUser" />
);
}
when, in fact, the actual icon name is just "user", not "faUser":
实际上，实际的图标名称只是“user”，而不是“faUser”：
render() {
return (
<FontAwesomeIcon icon="user" />
);
}
回答by Vladimir Vlasov
You can use FontAwesome icons without library like this:
您可以使用没有库的 FontAwesome 图标，如下所示：
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
<FontAwesomeIcon icon={faCoffee} />
I've installed all the necessary packages as react-fontawesomesays:
我已经安装了所有必要的软件包，如react-fontawesome所说：
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
回答by Thomas
And if you find yourself not seeing your icon when trying to display faTrashAlt(or similarly named icon), not only do you have to remove the 'fa' when actually using your icon but also you have to convert the icon name from cameCase to "lisp-case".
如果您在尝试显示faTrashAlt（或类似名称的图标）时发现自己没有看到您的图标，那么您不仅需要在实际使用图标时删除“fa”，还必须将图标名称从 cameCase 转换为“口齿不清”。
So, after loading the alternative trash can icon this way:
因此，在以这种方式加载替代垃圾桶图标后：
fontawesome.library.add(faTrashAlt);
It's then used that way:
然后以这种方式使用：
<FontAwesomeIcon icon="trash-alt" />
Just so you don't waste 20 precious minutes of your time.
只是为了让您不要浪费宝贵的 20 分钟时间。
回答by starpebble
Just because there is more than one way to get a fontawesome icon into a website, I'll give an example with react and fontawesome and explicit import. Explicit import is frugal. Only the exact icon from the fontawesome icon set is imported and the FontAwesomeIcon component icon attribute is set to the imported object instead of the name.
仅仅因为有不止一种方法可以将 fontawesome 图标放入网站，我将举一个带有 react 和 fontawesome 以及显式导入的示例。显式导入是节俭的。仅导入 fontawesome 图标集中的确切图标，并将 FontAwesomeIcon 组件图标属性设置为导入的对象而不是名称。
Example:
例子：
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faHistory } from '@fortawesome/pro-regular-svg-icons';
function exampleReactComponent() {
return (
<div>
<p><FontAwesomeIcon icon={faCoffee}/></p>
<p><FontAwesomeIcon icon={faHistory}/></p>
</div>
);
}
I don't disagree with setting the icon attribute of the FontAwesomeIcon by name it's just that I encountered console errors about finding icons by name and the resolution I discovered is to reference the object. Note the icon={} notation because it is different than using a quoted string of the icon name.
我不反对按名称设置 FontAwesomeIcon 的图标属性，只是我遇到了有关按名称查找图标的控制台错误，而我发现的解决方案是引用该对象。请注意 icon={} 表示法，因为它与使用带引号的图标名称字符串不同。
Explicit Import... react-fontawesome npm package github link
显式导入... react-fontawesome npm 包 github 链接
Installing with npm... installing fontawesome with npm link
使用 npm 安装...使用 npm 链接安装 fontawesome
