# Importing assets

Let's say, [in the DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage), you come across the following HTML code.

```html
<!-- 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.

{% tabs %}
{% tab title="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.

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

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

{% endtab %}

{% tab title="Next.js" %}
In modern Next, if not explicitly disabled, image files (including SVGs) are imported using [next/image](https://nextjs.org/docs/upgrading#nextconfigjs-customization-to-import-images).

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

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

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

{% endtab %}
{% endtabs %}