Font-AwesomeアイコンライブラリのReactコンポーネント。
Font 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/lessをインポートし、フォントパスを構成する必要があります。このブログ投稿では、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でコードをフォーマットします。テストが合格していることを確認し、JSDOCSの更新を使用して、新機能のテストとAPIの文書の変更を書いていることを確認してください。
プルリクエストを送信する前に、 npm run distを実行してプロジェクトを構築し、変更をコミットします。
MIT©Dana Woodman