Iteration over pictograms

[Maxenceee]

This PR resolves #424 and the comments made by @ddecrulle in #417.

It includes :

• SVG path grouping, according to the DSFR specs (major, minor & decorative)
• artwork classes usage instead of hardcoded colors
• color variation & dark mode support

The pictogram components now follows this structure:

export default createIcon(
    <>
        <g className="fr-artwork-minor">
            <path d="..." />
            ...
        </g>
        <g className="fr-artwork-major">
            <path d="..." />
            ...
        </g>
    </>,
    "Name"
);

I've added new examples to the storybook such as color variation.

Also, I edited the import section and replaced it with an individual import: import { Accessibility } from "@codegouvfr/react-dsfr/picto"; => import Accessibility from "@codegouvfr/react-dsfr/picto/Accessibility";

Pictogram can still be imported from the index file, I only changed the example.

Sorry for the back and forth, I had started this implementation for a project and it was enough but I should have thought about reading the DSFR specs on the subject better before proposing my first PR, we would have saved time :)

[ddecrulle]

Very nice work! No worries about the back and forth — DSFR pictograms are indeed a bit unconventional and not the easiest to work with 😅.

Now, we need to update the components that use pictograms — like Tile, for example — to make them composable.
In other words, we should be able to pass exported pictograms as props and use them inside components like Tile.

Thanks a lot!