search

codegouvfr / react-dsfr

🇫🇷 The Frech Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
403 stars 49 forks source link

Button: Police non Marianne quand icone remix icone utilisée #269

Closed totakoko closed 1 month ago

totakoko commented 1 month ago

Sur un composant Button, quand j'utilise une icone DSFR, tout est bien et la police du texte est Marianne. Par contre, si j'utilise une icone Remix Icons, alors la police est un fallback local vers Liberation Serif qui n'est pas top. Est-ce voulu ? L'issue est peut-être côté DSFR aussi.

garronej commented 1 month ago

Salut @totakoko,
Ah mince :/
Non c'est pas voulu, te te sens de regarder a quoi c'est dù?
react-dsfr c'est un peut votre projet tout le monde est libre de contribuer.

totakoko commented 1 month ago

Je vais essayer de voir ça, je sais juste que c'est la police remixicons qui est utilisée pour le ::before (icone) et le texte directement.

totakoko commented 1 month ago

Ok, c'est bon. Ça venait du CSS de remixicons (2.5) qui était importé et qui n'était pas voué à être utilisé sur les boutons, mais seulement des span d'icones. Je l'ai supprimé et tout est nickel maintenant. Désolé pour ce faux positif ! :sweat_smile: image

garronej commented 1 month ago

Ah bon?! C'est vrais? Mais normalement react-dsfr fait tout pour toi, tu n'a pas a importer quoi que ce soit.
react-dsfr analise ton code au moment du build...

https://react-dsfr.codegouv.studio/icons

totakoko commented 1 month ago

C'est côté FCU qu'on avait un import, pas de problème côté react-dsfr je te rassure ! https://github.com/betagouv/france-chaleur-urbaine/blob/179e349782b311cfbd72d8164f980a4a7542a942/src/pages/_app.tsx#L11

garronej commented 1 month ago

Ok top top top

garronej commented 1 month ago

Ah mais attend!
Je vois que vous importez le CSS a la main!
https://github.com/betagouv/france-chaleur-urbaine/blob/179e349782b311cfbd72d8164f980a4a7542a942/src/pages/_app.tsx#L7-L11

Et je vois aussi que vous n'utilisez pas le script only-include-used-icons

Dans l'utilisation standard react-dsfr grère tout pour vous!
https://react-dsfr.codegouv.studio/ (la tab Next Page router)

Là vous faites plein de trucks que React-dsfr fait tout seul normalement

garronej commented 1 month ago

Là c'est vraiment bête, vous n'utiliser pas du tout l'adapter @codegouvfr/react-dsfr/next-pagesdir pour Next.js Pages Router.
Vous ne profitez pas des meilleurs performances et de la meilleur DX...

totakoko commented 1 month ago

Hm, oui, alors je pense que c'est parce que tu regardes le code actuel et non la PR de migration (car on a beaucoup de changements...) de @dataesr vers @codegouv. Après si tu as toujours des conseils on est preneurs !

Le même fichier sur la nouvelle PR

garronej commented 1 month ago

Ah ok magnifique! Non vous m'avez l'air tout bon!
Oui je comprend, vous avez transitioner j'aurais du me douter en voyant l'historique du projet!