🌅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.

Using hardcoded links

This is not the recommended approach since it isn't the more efficient nor the more maintainable way. You should rely on your bundler instead.

First make sure you have this script in your package.json

 "scripts": {
+    "postinstall": "copy-dsfr-to-public"
 }

Now you can simply write the following and it will work:

<svg>
    <use xlinkHref="/dsfr/artwork/dark.svg#artwork-minor#artwork-minor" />
</svg>

Rely on your bundler

This is the preferred approach.

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>;