react-dsfr
GitHubComponentsPlayground
  • πŸ”§Initial setup
  • πŸ”€Integration with routing libs
  • 🦺Class names type safety
  • 🎨Colors
  • 🧩Components
  • β˜‘οΈIcons
  • πŸ’…CSS in JS
  • 🌎Internationalization
  • πŸŒ…Importing assets
  • 🀝MUI integration
  • πŸ•ŠοΈCustom Branding
  • πŸ“–Storybook
  • πŸ“ŠAnalytics
  • πŸ”’Content-Security-Policy
  • πŸ“¦Publishing a NPM modules that depends on react-dsfr
  • πŸ’ŸContributing
Powered by GitBook
LogoLogo

Links

  • GitHub
  • Playground
  • Components

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

On this page

Was this helpful?

Edit on GitHub
Export as PDF

Icons

PreviousComponentsNextCSS in JS

Last updated 6 months ago

Was this helpful?

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

Whenever you add a new icon to your project, restart your local server. This will launch the npx react-dsfr update-icons script configured in the (else you'll see a blue square instead of your icon).

import { fr }Β from "@codegouvfr/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:

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 when you.

The fr.cx() utility is also handy for autocompleting the icons that are supported:

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

β˜‘οΈ
Remixicon
the dsfr documentation
Initial setup
Searching for "download" on remixicon.com
Using fr.cx()