Pictogrammes & Illustrations

Les pictogrammes illustrent des thématiques et concepts administratifs de manière moderne, lisible et harmonieuse.

Structure & Couches de couleur

Les pictogrammes DSML sont conçus en SVG multi-couches. Chaque élément SVG utilise des classes CSS standardisées permettant de personnaliser ou d'animer dynamiquement les aplats et contours selon l'identité visuelle de votre service.

.ml-artwork-background
Fond d'illustration
Formes d'arrière-plan douces (par défaut Vert 50 / Or 50)
.ml-artwork-major
Contours principaux
Lignes directrices et structure de l'icône (Gris neutre 900)
.ml-artwork-minor
Accents officiels
Sceaux de validation, détails d'attention (Or Sahel 500)
.ml-artwork-decorative
Détails secondaires
Points de focalisation et motifs secondaires (Vert Menthe)

Méthodes d'intégration pour les développeurs

Le package @malihub/dsml-core propose deux méthodes d'intégration selon les besoins de votre projet :

Option 1 : Direct Inline SVG (Recommandée)

Copiez directement l'élément SVG depuis le catalogue ci-dessous et insérez-le dans votre composant (HTML, Astro, React, Vue) :

HTML 
<div class="ml-pictogram" style="width: 64px; height: 64px;">
  <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
    <symbol id="acc-decorative"><path d="..."/></symbol>
    <symbol id="acc-minor"><path d="..."/></symbol>
    <symbol id="acc-major"><path d="..."/></symbol>
    <use class="ml-artwork-decorative" href="#acc-decorative"/>
    <use class="ml-artwork-minor" href="#acc-minor"/>
    <use class="ml-artwork-major" href="#acc-major"/>
  </svg>
</div>

Option 2 : Via le Sprite SVG unifié (dsml-pictograms.svg)

Si vous utilisez le sprite global inclus dans @malihub/dsml-core/assets/dsml-pictograms.svg, faites référence directement aux symboles id :

HTML 
<!-- 1. Charger le sprite SVG en haut du layout ou via une balise img/fetch -->
<!-- 2. Référencer le pictogramme souhaité : -->
<div class="ml-pictogram" style="width: 64px; height: 64px;">
  <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
    <use class="ml-artwork-decorative" href="#accessibility-0-decorative"/>
    <use class="ml-artwork-minor" href="#accessibility-0-minor"/>
    <use class="ml-artwork-major" href="#accessibility-0-major"/>
  </svg>
</div>

Catalogue des pictogrammes

Filtrez le catalogue par mot-clé ou par catégorie. Cliquez sur n'importe quelle carte pour copier l'intégralité du code SVG.

Affichage de 102 pictogrammes
✓ Code SVG copié dans le presse-papier !

Recherche dans la documentation

🔍
Recherches fréquentes