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

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

以防万一有人遇到这个问题...我查看了 webpack.config.prod.js 并发现一条评论说 import 已将任何文件内置到 /media 文件夹中。通过导入我所有的 SVG 精灵文件解决了我的问题，这不是理想的但完成了工作。

Answer 2

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

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

参考：

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

Creating an SVG Sprite component with ejected create-react-app

javascript

reactjs

svg

webpack

create-react-app