1

私はcreate-react-app ライブラリを使用しており、開発でうまく機能する 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>
    );
}

ご覧のとおり、特定のスプライト ファイル内の特定のシンボルを参照しています。

4

2 に答える 2

2

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。以前にイジェクトした場合は、プロジェクトにバックポートする必要がある場合があります。

参照：

于 2016-09-27T10:05:14.193 に答える
0

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

于 2016-09-27T02:18:27.460 に答える