Comment fonctionne le chargement des icones ?

[m-maillot]

Hello !

J'ai un cas particulier à gérer. Sur le code du travail numérique, on va scrapper les pages du ministère du travail (https://travail-emploi.gouv.fr). Ils sont en DSFR, donc nickel !

Sur notre site, on va afficher le contenu dans un div et injecter le HTML via la méthode dangerouslySetInnerHTML.
Voici un exemple sur une page : https://code-du-travail-numerique-linked-feat-fiches-mt-dsfr-qefoqjfs.ovh.fabrique.social.gouv.fr/fiche-ministere-travail/projet-de-transition-professionnelle

Sur cette même page, on a une mise en exergue dans l'onglet Qui peut conseiller le salarié ?. Sur cette mise en exergue, l'icone ne s'affiche pas :

J'ai lu dans la doc des icônes (https://react-dsfr.codegouv.studio/icons) qu'il y a un script only_include_used_icons. Est ce que le fait que l'icône ne soit pas directement utilisée, fait que l'on ne la charge pas et on obtient ce carré noir ? Comment faire pour le contourner ?

[ddecrulle]

Le script only_include_used_icons permet de n’ajouter dans le bundle de l’application que les icônes réellement utilisées. Lors du build, ce script analyse ton code source pour identifier les icônes utilisées. Dans ton cas d’usage, tu dois trouver un moyen, lors du scraping, de récupérer les icônes nécessaires, ou bien d’importer toutes les icônes. La première méthode est préférable pour optimiser le poids du bundle.

[m-maillot]

C'est impossible de connaitre les icones au build car les données peuvent évoluer tous les jours et on ne relance pas un build tous les jours.
Est ce que l'on sait désactiver cette fonctionnalité au cas où ? Je vais explorer d'autres pistes en parallèle

[garronej]

Hello @m-maillot,

C'est un problème asses classique quand on ne connais pas les icones ahead of time.
Vous pouvez inclure l'intégralité des icones. Il suffit d'importer la fiche de style non modifier dynamiquement par react-dsfr.
Le problème c'est que vous utilisez Next je crois et next refuse de compiler ça. Le message peut se résumé à "Ta feuille de style dépasse la taille résonable, fait quellque chose".

Si tu veux essayer la feuille de style avec tout les icones est: '@codegouvfr/react-dsfr/dsfr/utility/icons/icons.css' (C'est la feuille de style non modifié qui est livrée avec le DSFR)