Any benefit to spriting images in Create React App? - create-react-app

Question

I have multiple background images used in my CSS. Best practice for this used to be to combine images into a single sprite sheet to reduce the number of HTTP requests.
From looking at the Create React App documentation there is no mention of sprites. Instead it recommends importing images directly into CSS:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files
As a test I've done this. So a React component's CSS looks like this:
.component {
&:before {
background-image: url('./img/account.svg'); // This image is within the React component's folder
}
}
From looking at my network tab I can multiple images:
However when I use the dev tools to simulate a slow connection the images all appear at exactly the same time. This makes me wonder if in fact there are not multiple HTTP requests and Webpack is doing this performance optimisation some other way?
So to summarise my question: If I were to combine my background CSS images into a single sprite sheet, would this decrease the number of HTTP requests and therefore improve performance?

Answer 1

You can find an answer here in the CRA document:
To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.
https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files