☑
Icons
Whenever you add a new icon to your project, restart your local server. This will launch the
only_include_used_icons
script configured in the Initial setup (else you'll see a blue square instead of your icon).import { fr } from "@codegrouvfr/react-dsfr";
import { Button } from "@codegouvfr/react-dsfr/Button";
<>
<Button iconId="fr-icon-checkbox-circle-line">Label button MD</Button>
<span className={fr.cx("fr-icon-ancient-gate-fill")} aria-hidden={true}/>
<i className={fr.cx("fr-icon-ancient-gate-fill")} />
<>

You can go and search for a keyword:

Searching for "download" on remixicon.com
When you find something fitting, you can copy paste the class name ( starting with
ri-
) and use it anywhere you would have used a .fr-icon-xxxx
! 🚀Example:
import { fr } from "@codegrouvfr/react-dsfr";
import { Button } from "@codegouvfr/react-dsfr/Button";
<>
<Button iconId="ri-mail-download-line">Label button MD</Button>
<span className={fr.cx("ri-mail-download-line")} aria-hidden={true}/>
<i className={fr.cx("ri-mail-download-line")} />
<>

No need to worry about importing the correct icons file.
It's done automatically for you.
The
dsfr/utility/icons/icons.css
file is patched by the only_include_used_icons
script.This script looks at your code to see what icons you are actually using then proceed to patch
icon.css
file so that only those icons are defined.The
fr.cx()
utility is also handy for autocompleting the icons that are supported:
Using fr.cx()
Last modified 1mo ago