🌅
Importing assets
How to import images, SVGs and other static DSFR resources
<!-- 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>
This is the preferred approach.
Create React App / Vite / Others
Next.js
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>
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>;
Last modified 9d ago