使用弹出的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文件解决了我的问题，这不是很理想，但是可以完成工作。