使用弹出的创建-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之前弹出，importing资产是将它们添加到构建输出中的唯一方法。这有很好的理由:例如，它们的文件名自动包含哈希，因为build system知道它们，所以您不需要担心在文件更改时破坏浏览器缓存。您也不需要担心输入错误，因为缺少的文件会给您带来编译错误。

从0.5.0开始，我们还支持一个public文件夹作为一个转义舱口。您可以将任何文件放入public文件夹中，它们将与构建输出合并。唯一的缺点是，要引用它们，需要将process.env.PUBLIC_URL添加到链接中。这确保了如果您为一个非根URL (如GitHub页面)构建一个项目，它仍然正确工作。

<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之后才可用，所以如果您在前面弹出，可能需要将它移植到您的项目中。

参考资料：

• 文件夹
• 拉出请求添加对它的支持

Answer 2

万一有人遇到这个问题..。我查看了webpack.config.prod.js，发现了一条评论，其中说您import获得的任何文件都内置到/media文件夹中。修正了我的问题，通过导入我所有的SVG雪碧文件，这并不理想，但完成了工作。