@arcpkg/mda-icons

@arcpkg/mda-icons est un framework de police d'icônes complet, utilisable dans n'importe quel écosystème (HTML pur, React, Vue, Angular, e-mails, …). Il fournit la webfont dans tous les formats (EOT, SVG, TTF, OTF, WOFF, WOFF2) avec les métadonnées embarquées, un CSS prêt à l'emploi (mda-icon mda-icon-*), une version CSS auto-portée (police en base64, aucun fichier à déployer), un support IE6/7/8, des sources SCSS/LESS, une carte JSON des codepoints et un aperçu HTML.

2583 icônes pleines (style solid). Pour le style outline/contour et React/RN, voir les paquets jumeaux @arcpkg/mda-svgicons (web) et @arcpkg/native-mda-svgicons (React Native).

📦 Installation

npm install @arcpkg/mda-icons
# ou : yarn add @arcpkg/mda-icons   /   pnpm add @arcpkg/mda-icons

Les assets sont à la racine du paquet (css/, fonts/, scss/, less/) — comme font-awesome. En téléchargement manuel, copiez ces dossiers dans votre projet.

🚀 Utilisation (HTML / n'importe quel écosystème)

<link rel="stylesheet" href="node_modules/@arcpkg/mda-icons/css/mda-icons.css">

<i class="mda-icon mda-icon-home"></i>
<i class="mda-icon-heart"></i>           <!-- la classe mda-icon-* suffit -->
<i class="mda-icon-spinner mda-icon-spin"></i>
<i class="mda-icon-star mda-icon-2x"></i>

Classes utilitaires

| Classe | Effet | |--------|-------| | mda-icon-lg, -2x … -5x | Taille | | mda-icon-fw | Largeur fixe (alignement en liste) | | mda-icon-spin, mda-icon-pulse | Rotation animée | | mda-icon-rotate-90/180/270 | Rotation | | mda-icon-flip-h, mda-icon-flip-v | Miroir | | mda-icon-outline | Style trait (contour) |

La couleur et la taille suivent le texte (color, font-size) — c'est une police, donc tout le CSS texte fonctionne.

Style outline (trait)

Chaque icône existe aussi en version trait via une seconde police (mda-icons-outline) aux mêmes codepoints : ajoutez simplement le modificateur mda-icon-outline à n'importe quelle icône.

<i class="mda-icon-home"></i>                    <!-- plein -->
<i class="mda-icon-home mda-icon-outline"></i>   <!-- contour -->

🪟 Support Internet Explorer

• IE8 : fonctionne tel quel (format EOT + :before), via css/mda-icons.css.

• IE6 / IE7 : ces versions n'ont pas de contenu généré (:before). Deux options :

  1. Feuille dédiée (injection auto via expression CSS, IE5–7 uniquement) :

     <!--[if gte IE 8]><!--><link rel="stylesheet" href="css/mda-icons.css"><!--<![endif]-->
     <!--[if lte IE 7]><link rel="stylesheet" href="css/mda-icons.css">
                       <link rel="stylesheet" href="css/mda-icons-ie7.css"><![endif]-->

  2. Entité directe (marche partout, IE6 inclus) :

     <i class="mda-icon">&#xe47f;</i>   <!-- mda-icon-home -->

     Les entités sont dans mda-icons.json (entity / codepoint).

🎁 CSS auto-porté (police embarquée en base64)

Un seul fichier, aucun fichier de police à servir (idéal e-mails, widgets, extensions) :

<link rel="stylesheet" href="css/mda-icons-embedded.css">
<i class="mda-icon-home"></i>

🎨 SCSS / LESS

// SCSS — tout le framework
@import '@arcpkg/mda-icons/scss/mda-icons';

// ou variables + mixin seulement
@import '@arcpkg/mda-icons/scss/variables';
.btn-home::before { @include mda-icon('home'); }
.btn-home::before { content: $mda-icon-home; }   // variable directe

@import '@arcpkg/mda-icons/less/mda-icons.less';
.btn::before { content: @mda-icon-home; }

⚛️ React / Vue / Angular

Importez le CSS une fois, puis utilisez les classes :

import '@arcpkg/mda-icons/css/mda-icons.css';
export const Home = () => <i className="mda-icon mda-icon-home" aria-hidden="true" />;

🗂️ Contenu du paquet

@arcpkg/mda-icons/
  css/     mda-icons.css            # CSS principal (@font-face multi-format + classes)
           mda-icons.min.css        # version minifiée
           mda-icons-embedded.css   # police en base64 (auto-porté)
           mda-icons-ie7.css        # support IE6/7
  fonts/   mda-icons.{eot,svg,ttf,otf,woff,woff2}   # webfont, métadonnées embarquées
  scss/    mda-icons.scss  _variables.scss
  less/    mda-icons.less
  mda-icons.json                    # nom → codepoint / unicode / entité / classe
  preview.html                      # galerie filtrable des 2583 icônes

Ouvrez preview.html pour parcourir et filtrer toutes les icônes.

🛠️ Développement / (re)génération

Le code source (icons.json, build-font.mjs) et node_modules ne sont pas publiés (whitelist files). Pour reconstruire les assets :

npm run build        # node build-font.mjs  → reconstruit css/ fonts/ scss/ less/ …
npm run build:react  # node build-svgicons.mjs → régénère @arcpkg/mda-svgicons & native

prepublishOnly relance le build avant chaque npm publish. La police est construite depuis icons.json via svgicons2svgfont → svg2ttf → ttf2woff/woff2/eot. Les alias FontAwesome au tracé identique sont fusionnés par svg2ttf (police plus légère) ; chaque classe garde son propre codepoint et son rendu correct.

Note OTF : fonts/mda-icons.otf est un OpenType à contours TrueType (conteneur sfnt valide, installable partout) — pas du CFF.

📄 Licence

MIT © INICODE