Question

我正在使用create-react-app library，并且我已经创建了一个在开发中运行良好的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>
    );
}

正如您所看到的，我在特定的精灵文件中引用了特定的符号。

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后可用，因此如果您之前退出，则可能需要将其后退到项目中。

参考：

Answer 2

如果有人遇到此问题...我查看了webpack.config.prod.js并找到了一条评论，说明import内置/media文件夹中的所有文件。修复了我的问题，导入了所有不理想的SVG精灵文件，但完成了工作。

使用弹出的create-react-app创建SVG Sprite组件

2 个答案: