Contrib.social

[1.0.0-beta2] Investigate DSFR pictogrammes

Open on Drupal.org →
Created on 15 September 2024, 7 months ago
Updated 18 September 2024, 7 months ago

Problem/Motivation

We already know how to implements DSFR icon pack, but there is also a pictogram system in DSFR: https://www.systeme-de-design.gouv.fr/fondamentaux/pictogramme/

Like a SVG Sprite but with 3 sources in the renderable.

<svg class="fr-artwork" aria-hidden="true" viewBox="0 0 80 80" width="80px" height="80px">
  <use class="fr-artwork-decorative" xlink:href="/img/artwork/pictograms/city-hall.svg#artwork-decorative"></use>
  <use class="fr-artwork-minor" xlink:href="/img/artwork/pictograms/city-hall.svg#artwork-minor"></use>
  <use class="fr-artwork-major" xlink:href="/img/artwork/pictograms/city-hall.svg#artwork-major"></use>
</svg>

Also, a special color mechanism:

La couleur mineure (par défaut en red-marianne) peut être modifiée par une couleur d’accentuation en ajoutant un modificateur au niveau de fr-artwork (ex: “fr-artwork fr-artwork--green-emeraude”)

With:

Ajouter une balise

au début du

permet de définir les couleurs par défaut des 3 groupes, en cas d’utilisation hors dsfr.

Proposed resolution

Is it possible to implement this with what we have now? Do we need to add or change something in our implementation?
📌 Task
Status

Active

Version

1.0

Component

Miscellaneous

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024