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

【问题标题】：Creating an SVG Sprite component with ejected create-react-app使用弹出的 create-react-app 创建 SVG Sprite 组件
【发布时间】：2017-02-04 11:55:01
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs svg webpack create-react-app

【解决方案1】：

万一有人遇到这个问题...我查看了webpack.config.prod.js 并找到了一条评论，上面写着您import 内置到/media 文件夹中的任何文件。通过导入我的所有 SVG sprite 文件解决了我的问题，这些文件并不理想，但完成了工作。

【讨论】：

【解决方案2】：

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

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

参考：

【讨论】：