1

我正在使用该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>
    );
}

如您所见，我在特定精灵文件中引用特定符号。

4

2 回答 2

2

如果您在 0.5.0 之前弹出，import则 ing assets 是将它们添加到构建输出中的唯一方法。这有充分的理由：例如，它们的文件名自动包含哈希，因为构建系统知道它们，因此您无需担心文件更改时会破坏浏览器缓存。您也不必担心拼写错误，因为丢失的文件会给您带来编译错误。

从 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并发现了一条评论，上面写着你在文件夹中import构建的任何文件/media。通过导入我的所有 SVG sprite 文件解决了我的问题，这些文件并不理想，但完成了工作。

于 2016-09-27T02:18:27.460 回答