react fontawesome
General cleanup and documentation fixes
字体令人陶醉的图标库的一个反应组件。
如果您使用的是Awesome V5+,请使用官方的React组件! react-fontawesome不支持fontawesome V5!
该项目不再积极维护。如果可以的话,请尝试使用上面的官方组件!
npm install --save react-fontawesome注意:此组件不包括任何字体很棒的CSS或字体,因此您需要确保通过将它们添加到构建过程中或链接到CDN版本,以某种方式将其包含在某种程度上。
最快开始的方法是在页面的<head>中使用链接标签导入fontawesome:
< link href =" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " rel =" stylesheet " />您可以更改版本编号,以使用任何版本的Fontawesome。
如果您使用的是WebPack,则需要安装Fontawesome,导入Fontawesome Sass/LINS并配置字体路径。请参阅此博客文章,介绍如何使WebPack和Fontawesome一起工作。
var React = require ( 'react' )
var FA = require ( 'react-fontawesome' )
React . render ( < FA name = "rocket" /> , document . body ) className名称,样式和其他道具(所有其他道具都直接传递给组件)。 定期使用
var React = require ( 'react' )
var FontAwesome = require ( 'react-fontawesome' )
var MyComponent = React . createClass ( {
render : function ( ) {
return (
< FontAwesome
className = "super-crazy-colors"
name = "rocket"
size = "2x"
spin
style = { { textShadow : '0 1px 0 rgba(0, 0, 0, 0.1)' } }
/>
)
} ,
} )使用CSS模块
import React from 'react'
import FontAwesome from 'react-fontawesome'
import faStyles from 'font-awesome/css/font-awesome.css'
var MyComponent = React . createClass ( {
render : function ( ) {
return (
< FontAwesome
className = "super-crazy-colors"
name = "rocket"
cssModule = { faStyles }
size = "2x"
spin
style = { { textShadow : '0 1px 0 rgba(0, 0, 0, 0.1)' } }
/>
)
} ,
} )以上将创建这样的输出:
<span class="font-awesome__fa___2otTb font-awesome__fa-rocket___lfSov font-awesome__super-crazy-colors___3k583"></span>
请参阅API文档以获取完整文档。
欢迎拉请求!
使用npm test运行测试套件,并使用npm run format格式化代码。确保测试通过,并为新功能编写测试,并通过对JSDOC进行更新的API进行文档更改。
在提交拉动请求之前,请运行npm run dist以构建项目并进行更改。
麻省理工学院©Dana Woodman