Images and Assets
Images that have a .png
, .jpg
, .jpeg
, .gif
or .webp
extension can be
imported into your components. The default export of an image module is its
resulting URL, which you can use as the src
attribute for <img>
tags for
example:
import imgSrc from "./my-image.png"
export function MyImage() { return <img src={imgSrc} alt="" />}
The filename of the image will be changed and it will be output into the build directory.
info
To improve loading times, small images (< 10 KB) will be inlined into the JavaScript code with data-urls and therefore won't appear as files in your output.
tip
When single-file mode is activated, all images will be inlined.
#
SVG SupportImporting a .svg
-file automatically convert it into a React component. You can
pass them any props a regular <svg>
-element would take:
import Icon from "./my-icon.svg"
export function MyIcon() { return <Icon className="icon" />}