イジェクトされたcreate-react-appを使用したSVGスプライトコンポーネントの作成

Question

私はcreate-react-applibraryを使用しており、開発にはうまく機能するSVGコンポーネントを作成しました。私の問題は、公開するアプリケーションをビルドするときに、ビルドプロセスがコンポーネントの動的パスを認識しないため、メインのスプライトファイルを/mediaフォルダに入れないということです。

例SVGコンポーネント：

render() { 
    return (
     <svg className={`icon ${this.props.id}`} fill={this.props.fill}> 
      <use xlinkHref={`/src/assets/images/svg-sprite/svg-sprite-${this.props.category}-symbol.svg#ic_${this.props.id}_24px`}></use> 
     </svg> 
    ); 
} 

あなたは私が特定のスプライトファイル内の特定のシンボルを参照しています見ることができるように。

Answer 1

0.5.0より前に排出した場合は、importアセットを使用してビルド出力に追加する唯一の方法です。たとえば、ファイル名にはビルドシステムが認識しているので自動的にハッシュが含まれているため、ファイルが変更されたときにブラウザキャッシュを破棄する必要はありません。また、ファイルが見つからない場合、コンパイルエラーが発生するため、誤植を心配する必要はありません。

0.5.0以降、エスケープハッチとしてpublicフォルダもサポートしています。任意のファイルをpublicフォルダに置くことができ、それらはビルド出力とマージされます。唯一の問題は、それらを参照するには、process.env.PUBLIC_URLをリンクに追加する必要があることです。これにより、ルート以外のURL（GitHub Pagesなど）のプロジェクトを構築しても、正しく動作します。

<use linkHref={process.env.PUBLIC_URL + `/assets/images/svg-sprite/svg-sprite-${this.props.category}-symbol.svg#ic_${this.props.id}_24px`}></use> 

は限り、あなたのpublicフォルダがassets/images/svg-sprite/svg-sprite-*ファイルが含まれているように動作します。

この機能はreact-scripts@0.5.0以降のみ使用可能ですので、以前に取り出す場合は、プロジェクトにバックポートする必要があります。

参考：

• Using the public Folder
• Pull Request adding support for it

Answer 2

誰かがこの問題に遭遇した場合... webpack.config.prod.jsを調べ、importというファイルが/mediaフォルダに組み込まれているとのコメントを見つけました。私のSVGスプライトファイルをすべてインポートすることで、私の問題を修正しました。これは理想的ではありませんが、仕事を終えました。