使用彈出的create-react-app創建SVG Sprite組件

Question

我正在使用create-react-app 庫，並且創建了一個在開發中運行良好的SVG組件。 我的問題是，在構建要發布的應用程序時，構建過程無法識別組件的動態路徑，因此無法將主sprite文件放入我的/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>
    );
}

如您所見，我正在引用特定Sprite文件中的特定符號。

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起react-scripts@0.5.0因此，如果您較早彈出，則可能需要將其react-scripts@0.5.0移植到項目中。

參考：

• 使用public文件夾
• 拉取請求為其添加支持

Answer 2

以防萬一有人遇到這個問題...我查看了webpack.config.prod.js並發現一條注釋，其中指出您import所有文件都構建在/media文件夾中。 通過導入我的所有SVG Sprite文件解決了我的問題，這不是很理想，但是可以完成工作。