Javascript 使用弹出的create react应用程序创建SVG精灵组件

我正在使用

createreact应用程序

，并且创建了一个在开发中运行良好的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>
    );
}

render（）{
返回(
);
}

---

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

如果有人遇到此问题。。。我查看了

webpack.config.prod.js

，发现一条评论说，您导入的任何文件都会内置到

/media

文件夹中。通过导入我的所有SVG sprite文件修复了我的问题，这些文件虽然不理想，但完成了任务。

如果您在0.5.0之前弹出，

import

ing资产是将它们添加到生成输出中的唯一方法。这有很好的理由：例如，它们的文件名自动包含一个哈希，因为构建系统知道它们，所以您不必担心在文件更改时破坏浏览器缓存。您也不必担心打字错误，因为丢失的文件会导致编译错误

自0.5.0以来，我们还支持将

public

文件夹作为转义图案填充。您可以将任何文件放入

public

文件夹中，它们将与生成输出合并。唯一的问题是，要引用它们，需要将

process.env.PUBLIC\u 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

因此，如果您提前弹出，您可能需要将其向后移植到项目中

参考：