🌅Importing assets

How to import images, SVGs and other static DSFR resources

Let's say, in the DSFR documentation, you come across the following HTML code.

<!-- Official documentation code, don't copy paste that -->
<svg>
    <use xlink:href="../../../dist/artwork/dark.svg#artwork-minor" />
</svg>

Let's see how we would translate this into React.

Create React App / Vite / Others

Most JS bundlers, by default, emits a separate file and exports the URL when comming across an import of a image or video file format.

import artworkDarkSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";

<svg>
    <use xlinkHref={`${artworkDarkSvgUrl}#artwork-minor`} />
</svg>

Next.js

In modern Next, if not explicitly disabled, image files (including SVGs) are imported using next/image.

You'll get a valid url by accessing the src property of the react component.

import ArtworkDarkSvg from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";

<svg>
    <use xlinkHref={`${ArtworkDarkSvg.src}#artwork-minor`} />
</svg>;