πŸŒ…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.

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.

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>

Last updated

Logo

2022-2023 PΓ΄le logiciel libre d'Etalab - MIT license