With webpack, using static assets like images and fonts works similarly to CSS.
src attribute of an image or the
href of a link to a PDF.
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. You can control the 10,000 byte threshold by setting the
IMAGE_INLINE_SIZE_LIMIT environment variable as documented in our advanced configuration.
Here is an example:
This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
This works in CSS too:
webpack finds all relative module references in CSS (they start with
Please be advised that this is also a custom feature of webpack.
It is not required for React but many people enjoy it (and React Native uses a similar mechanism for images).
An alternative way of handling static assets is described in the next section.
One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The
ReactComponent import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename.
Tip: The imported SVG React Component accepts a
titleprop along with other props that a
svgelement accepts. Use this prop to add an accessible title to your svg component.