[英]Creating an SVG Sprite component with ejected create-react-app
I'm using the create-react-app
library and I've created an SVG component that works well in development. 我正在使用
create-react-app
库,并且创建了一个在开发中运行良好的SVG组件。 My problem is that when building the application to publish, the build process doesn't recognize my component's dynamic paths and therefore doesn't put the main sprite file into my /media
folder. 我的问题是,在构建要发布的应用程序时,构建过程无法识别组件的动态路径,因此无法将主sprite文件放入我的
/media
文件夹中。
Example SVG Component: 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>
);
}
As you can see I'm referencing specific symbols in specific sprite files. 如您所见,我正在引用特定Sprite文件中的特定符号。
If you ejected before 0.5.0, import
ing assets is the only way to get them added into the build output. 如果在0.5.0之前弹出,则
import
资产是将它们添加到构建输出中的唯一方法。 There are good reasons for this: for example, their filenames automatically include a hash because build system is aware of them, so you don't need to worry about busting browser caches when the file changes. 这样做有充分的理由:例如,它们的文件名会自动包含一个哈希,因为构建系统可以识别它们,因此您不必担心文件更改时是否破坏浏览器缓存。 You also don't need to worry about typos because a missing file will give you a compilation error.
您也不必担心拼写错误,因为缺少文件会给您带来编译错误。
Since 0.5.0, we also support a public
folder as an escape hatch. 自从0.5.0,我们也支持一个
public
文件夹作为逃生舱口。 You can put any files in the public
folder, and they will be merged with the build output. 你可以把在任何文件中
public
文件夹,它们将与构建输出合并。 The only gotcha is that to reference them, you need to add process.env.PUBLIC_URL
to your links. 唯一的陷阱是要引用它们,您需要在链接中添加
process.env.PUBLIC_URL
。 This ensures that if you build a project for a non-root URL (like GitHub Pages), it still works correctly. 这样可以确保,如果您为非根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>
would work as long as your public
folder contains assets/images/svg-sprite/svg-sprite-*
files. 只要你会工作
public
文件夹中包含assets/images/svg-sprite/svg-sprite-*
文件。
Please note again that this feature is only available since react-scripts@0.5.0
so if you ejected earlier, you might need to backport it to your project. 再次请注意,此功能仅在
react-scripts@0.5.0
起react-scripts@0.5.0
因此,如果您较早弹出,则可能需要将其react-scripts@0.5.0
移植到项目中。
Reference: 参考:
In case anyone runs into this issue... I looked into the webpack.config.prod.js
and found a comment that says any files you import
get built into the /media
folder. 以防万一有人遇到这个问题...我查看了
webpack.config.prod.js
并发现一条注释,其中指出您import
所有文件都构建在/media
文件夹中。 Fixed my problem by importing all of my SVG sprite files which isn't ideal but got the job done. 通过导入我的所有SVG Sprite文件解决了我的问题,这不是很理想,但是可以完成工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.