Font Awesome 5をReactと連携させるにはどうすればよいですか？

Question

次の例では、最初のアイコンがレンダリングされますが、クラスが変更されても変更されません。

const Circle = ({ filled, onClick }) => { 
 
    const className = filled ? 'fas fa-circle' : 'far fa-circle'; 
 
    
 
    return (
 
    <div onClick={onClick} > 
 
     <i className={className} /> 
 
     <p>(class is {className})</p> 
 
    </div> 
 
); 
 
}; 
 

 
class App extends React.Component { 
 
    state = { filled: false }; 
 

 
    handleClick =() => { 
 
    this.setState({ filled: !this.state.filled }); 
 
    }; 
 
    
 
    render() { 
 
    return <Circle filled={this.state.filled} onClick={this.handleClick} />; 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>

Answer 1

BO41が正しいです、それは再レンダリングしないフォントのすばらしいjavascriptです。新しいフォント - すばらしいsvg/javascriptアイコンを使用していないのであれば、font-awesomeをCSSのwebfontとして使用できます。あなたのindex.htmlで

、fontawesomeスクリプトを削除し、fontawesomeのCSSスタイルシートを追加します。

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet"> 

あなたのコードが動作するはずです。

---

他の可能性は、公式フォント素晴らしい反応するパッケージを使用することです（それが面倒をもう少しだが、それは新しいSVGアイコン使用しています）

は、プロジェクトに必要なパッケージを追加します。

を

yarn add @fortawesome/fontawesome @fortawesome/react-fontawesome 
yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid 

そして、更新されたコード：

import fontawesome from '@fortawesome/fontawesome' 
import FontAwesomeIcon from '@fortawesome/react-fontawesome' 
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid' 
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular' 

const Circle = ({ filled, onClick }) => { 

    return (
    <div onClick={onClick} > 
     <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/> 
    </div> 
); 
}; 

class App extends React.Component { 
    state = { filled: false }; 

    handleClick =() => { 
    this.setState({ filled: !this.state.filled }); 
    }; 

    render() { 
    return <Circle filled={this.state.filled} onClick={this.handleClick} />; 
    } 
} 

詳細については、githubのレポを参照してください：https://github.com/FortAwesome/react-fontawesome

Answer 2

私はあなたの新しいアイコンをレンダリングする再トリガフォント素晴らしいJavaScriptに必要と仮定します。あなたが意図したように動作するであろうタグ付きの実画像を使用する場合は、

Answer 3

<i>タグ内にsvgをネストするようにfontawesomeを設定することができます。このようにして反応させることができます。代わりに、あなたは にそれを必要とするように、タグの 交換だけでアウトに動作しない場合があるかもしれません置き換えるの

https://fontawesome.com/how-to-use/svg-with-js

巣タグ。

Font Awesomeを設定して、タグ内でネストすることができます。

私たちは、私のタグ

<script> 
    FontAwesomeConfig = { autoReplaceSvg: 'nest' } 
</script> 
<i class="my-icon fas fa-coffee" data-fa-mask="fas fa-circle"></i> 

、元の内側のSVGタグで終わるで始まる、私は

<i class="my-icon" data-fa-mask="fas fa-circle" data-fa-i2svg=""> 
    <svg class="svg-inline--fa fa-coffee fa-w-16" data-fa-mask="fas fa-circle" aria-hidden="true" data-fa-i2svg="" data-prefix="fas" data-icon="coffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">...</svg> 
</i>