☑️Icons

Icons just work, you can copy paste any code from the dsfr documentation and expect things to work.

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")} />
<>

But on top of that, all icons from Remixicon are supported.

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()