Update the Tile component

[garronej]

The structure seems to have changed quite a bit since the component was created:

https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile/

[sbourdon13]

Hi,
I needed to use a tile with svg pictogram in my project, so I made a custom component (not really DSFR compliant 🙈).
https://github.com/DNUM-SocialGouv/champollion-front/blob/dev/app/src/components/AppPictoTile.tsx

For the svg, I copied the code from the Display component, to use the 3 pictogram colors. So in the parent component, I just need to import the svg and pass it as a prop. It’s pretty convenient that the tile component handles the svg to display the pictogram with correct DSFR colors (and correct colors for dark theme too).

import artworkCommunity from "@codegouvfr/react-dsfr/dsfr/artwork/pictograms/leisure/community.svg"

//...

<AppPictoTile
  title={title}
  //...
  pictogramUrl={artworkCommunity}
/>

It’s a very helpful piece of code to integrate the pictograms by the way, it could also be a helper function or a component maybe?

[slafayIGN]

We are facing the same issue inserting pictograms with the right colors and reaction to light and dark themes.

Thanks @sbourdon13 for the code example: https://github.com/DNUM-SocialGouv/champollion-front/blob/dev/app/src/components/PictoTile.tsx#L42-L60

A change of the Tile component would be great with an additional property pictogramUrl in addition to imageUrl.

We're giving a try with @ocruze and hopefully make a pull request if successful.