Iteration over pictograms

[garronej]

Hello @Maxenceee,

Thank you very much for your work on this!

There are a few remaining issues I'd like to highlight:

1. Colors should use CSS variables instead of being hardcoded

To properly support dark mode, please replace hardcoded colors with CSS variables. Here's an example using the Accessibility pictogram:

import { fr } from "@codegouvfr/react-dsfr";

type IconSize = "small" | "medium" | "large" | "inherit" | (string & {});
export type IconProps = {} & Omit<React.SVGProps<SVGSVGElement>, "fontSize">;

const getSize = (size: IconSize) => {
    switch (size) {
        case "small":
            return "1.25em";
        case "medium":
            return "1.5em";
        case "large":
            return "2.5em";
        case "inherit":
            return "inherit";
        default:
            return size;
    }
};

export function Accessibility(props: { fontSize?: IconSize }) {
    const { fontSize = "medium" } = props;

    return (
        <svg
            fill="none"
            viewBox="0 0 80 80"
            xmlns="http://www.w3.org/2000/svg"
            focusable="false"
            aria-hidden="true"
            fontSize={getSize(fontSize)}
            {...props}
        >
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M40 19C37.7909 19 36 20.7909 36 23C36 25.2091 37.7909 27 40 27C42.2091 27 44 25.2091 44 23C44 20.7909 42.2091 19 40 19ZM34 23C34 19.6863 36.6863 17 40 17C43.3137 17 46 19.6863 46 23C46 26.3137 43.3137 29 40 29C36.6863 29 34 26.3137 34 23Z"
                fill={fr.colors.decisions.artwork.minor.redMarianne.default}
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M14.724 15.3102C15.105 15.7101 15.0896 16.343 14.6898 16.724C9.33505 21.8252 6 29.0223 6 37C6 37.5523 5.55228 38 5 38C4.44772 38 4 37.5523 4 37C4 28.4527 7.57577 20.7389 13.3102 15.2759C13.7101 14.895 14.3431 14.9103 14.724 15.3102Z"
                fill={fr.colors.decisions.artwork.minor.redMarianne.default}
            />
            <path
                d="M70 43C70 43.5523 69.5523 44 69 44C68.4477 44 68 43.5523 68 43C68 42.4477 68.4477 42 69 42C69.5523 42 70 42.4477 70 43Z"
                fill={fr.colors.decisions.artwork.minor.redMarianne.default}
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M57.0422 29.0319C58.5952 28.7867 60 29.987 60 31.5594C60 32.7018 59.2427 33.7058 58.1442 34.0197L46.7253 37.2822C46.296 37.4049 46 37.7973 46 38.2437V44.5911L50.2161 58.9259C50.7758 60.8287 49.3493 62.7351 47.3659 62.7351C46.1274 62.7351 45.0189 61.9669 44.5841 60.8074L40 48.5831L35.4159 60.8074C34.9811 61.9669 33.8726 62.7351 32.6341 62.7351C30.6507 62.7351 29.2242 60.8287 29.7839 58.9259L34 44.5911V38.2437C34 37.7973 33.704 37.4049 33.2747 37.2822L21.8558 34.0197C20.7573 33.7058 20 32.7018 20 31.5594C20 29.987 21.4048 28.7867 22.9579 29.0319L39.844 31.6981C39.9474 31.7144 40.0526 31.7144 40.156 31.6981L57.0422 29.0319ZM58 31.5594C58 31.216 57.6932 30.9539 57.3541 31.0074L40.4679 33.6737C40.1579 33.7226 39.8421 33.7226 39.5321 33.6737L22.6459 31.0074C22.3068 30.9539 22 31.216 22 31.5594C22 31.8088 22.1654 32.0281 22.4053 32.0966L33.8242 35.3592C35.1121 35.7271 36 36.9043 36 38.2437V44.7351C36 44.8307 35.9863 44.9257 35.9594 45.0173L31.7026 59.4902C31.5197 60.1121 31.9859 60.7351 32.6341 60.7351C33.0389 60.7351 33.4011 60.4841 33.5433 60.1051L39.0637 45.384C39.21 44.9937 39.5832 44.7351 40 44.7351C40.4168 44.7351 40.79 44.9937 40.9363 45.384L46.4567 60.1051C46.5989 60.4841 46.9611 60.7351 47.3659 60.7351C48.0141 60.7351 48.4803 60.1121 48.2974 59.4902L44.0406 45.0173C44.0137 44.9257 44 44.8307 44 44.7351V38.2437C44 36.9043 44.8879 35.7271 46.1758 35.3592L57.5947 32.0966C57.8346 32.0281 58 31.8088 58 31.5594Z"
                fill={fr.colors.decisions.artwork.major.blueFrance.default}
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M40 12C24.536 12 12 24.536 12 40C12 55.464 24.536 68 40 68C45.9202 68 51.4086 66.1638 55.9304 63.0298C56.3843 62.7152 57.0073 62.8281 57.3219 63.282C57.6365 63.7359 57.5236 64.359 57.0696 64.6736C52.224 68.032 46.3403 70 40 70C23.4315 70 10 56.5685 10 40C10 23.4315 23.4315 10 40 10C56.5685 10 70 23.4315 70 40C70 40.5523 69.5523 41 69 41C68.4477 41 68 40.5523 68 40C68 24.536 55.464 12 40 12ZM67.2206 50.0748C67.7316 50.2845 67.9758 50.8686 67.7662 51.3796C67.4035 52.2638 66.9998 53.1268 66.5574 53.9662C65.4782 56.0144 64.1691 57.9222 62.6647 59.6555C62.3027 60.0726 61.6711 60.1172 61.254 59.7552C60.8369 59.3932 60.7923 58.7616 61.1543 58.3445C62.559 56.7261 63.7809 54.9451 64.788 53.0338C65.2008 52.2505 65.5775 51.4453 65.9159 50.6204C66.1255 50.1095 66.7097 49.8652 67.2206 50.0748Z"
                fill={fr.colors.decisions.artwork.major.blueFrance.default}
            />
        </svg>
    );

}

You can use the Color Helper to easily trace hex codes back to the appropriate CSS variables. Make sure to filter by the "artwork" context:

---

2. Provide an example demonstrating how to set arbitrary sizes

It was challenging to understand how to set arbitrary sizes. I only figured it out after checking the source code. Please include at least one clear example in the documentation.

---

3. Encourage cherry-picking component imports to optimize bundle size

We recommend explicitly importing individual components to keep the bundle size optimized, rather than importing from the index file.

Currently:

The correct imports should be:

import { Accessibility } from "@codegouvfr/react-dsfr/picto/Accessibility";

And defauly import should also work:

import Accessibility from "@codegouvfr/react-dsfr/picto/Accessibility";

---

Thanks again for your great work on this—I appreciate your efforts and hope you're willing to go the extra mile!

[Maxenceee]

@garronej I will change this as well as the requested changes by @ddecrulle in #417

[garronej]

Wait the recommendation of Dylan might be more appropriate. What I suggested works but Dylan seems to actually have read the doc and know the DSFR class abstractions...

Anyway, whatever approach will work, do what's more convenient for you.

[ddecrulle]

I'll keep the issue open as there are still two remaining tasks:

• Make exported components compatible with pictograms

  • Card is already compatible.
  • Tile still needs to be updated to accept pictograms via props (e.g., allow passing an exported pictogram component or URL).

• Enable support for background layers in artworks (artwork-background and artwork-motif)

  • This allows composing full artwork illustrations like the following example:

    import artworkOvoidSvgUrl from "../dist/dsfr/artwork/background/ovoid.svg";
    import artworkTechnicalErrorSvgUrl from "../dist/dsfr/artwork/pictograms/system/technical-error.svg";
    
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="fr-artwork"
      aria-hidden="true"
      viewBox="0 0 160 200"
    >
      <use
        className="fr-artwork-motif"
        href={`${artworkOvoidSvgUrl}#artwork-motif`}
      />
      <use
        className="fr-artwork-background"
        href={`${artworkOvoidSvgUrl}#artwork-background`}
      />
      <g transform="translate(40, 60)">
        <use
          className="fr-artwork-decorative"
          href={`${artworkTechnicalErrorSvgUrl}#artwork-decorative`}
        />
        <use
          className="fr-artwork-minor"
          href={`${artworkTechnicalErrorSvgUrl}#artwork-minor`}
        />
        <use
          className="fr-artwork-major"
          href={`${artworkTechnicalErrorSvgUrl}#artwork-major`}
        />
      </g>
    </svg>

[Maxenceee]

@ddecrulle I will update the Tile component.

However, in the Figma lib provided by DSFR I used to export the svgs there's no such layers. So I don't know where I can find these.

[ddecrulle]

Thank you!

Regarding the layer, I found some specifications in the documentation, specifically in the “La couleur de fond” section.
There’s also a live example available on the Error page template.

[Maxenceee]

I saw this but to be honest, I don't really understand what the point is. An svg is transparent so why apply the background color directly to it and not to its direct background, it seems strange to me as a practice. Especially since in the examples given the background color of the svg is mainly due to the blob behind.