我有一个关于 React 的项目,我需要将 FontAwesome 集成到其中。我找到官方的library https://github.com/FortAwesome/react-fontawesome并按照自述文件中的说明安装它
$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
当我尝试在我的代码中使用它时,如下所示:
<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>
我在控制台上收到此错误:
Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}
我尝试将 FontAwesome css 链接包含到 head 但没有帮助。我在用npm v4.6.1
; node v8.9.1
; react v16.2
.
您需要将您想要使用的任何图标添加到“库”中以方便参考。
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'));
在这里查看工作代码:https://codesandbox.io/s/8y251kv448 https://codesandbox.io/s/8y251kv448
另外,请阅读以下内容: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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)