@arcpkg/mda-svgicons

@arcpkg/mda-svgicons est un jeu d'icônes SVG React (DOM) optimisé et tree-shakeable, généré depuis mda-icons/icons.json (style FontAwesome, 2583 glyphes × 2 styles). Publié selon la convention des plugins @arcpkg/* : source TypeScript à la racine (main: index.ts) + miroir compilé js/.

📦 Installation

Via npm/yarn/pnpm

npm install @arcpkg/mda-svgicons react react-dom
# ou
yarn add @arcpkg/mda-svgicons react react-dom
# ou
pnpm add @arcpkg/mda-svgicons react react-dom

Dépendances requises

• React 18+
• React DOM 18+
• TypeScript 5.0+ (recommandé)
• Un bundler (Vite recommandé) — le chargement paresseux par nom utilise import.meta.glob

🚀 Démarrage rapide

import { SvgIcon } from '@arcpkg/mda-svgicons';
import home from '@arcpkg/mda-svgicons/icons/home';        // tree-shaking : seul `home` est inclus

export function Demo() {
  return (
    <>
      <SvgIcon icon={home} />                       {/* 13px, currentColor, solid */}
      <SvgIcon icon={home} size={13} color="#1976d2" />
      <SvgIcon icon={home} variant="outline" title="Accueil" />
    </>
  );
}

Par nom (paresseux — icônes data-driven / sélecteurs)

import { DynamicIcon } from '@arcpkg/mda-svgicons';

<DynamicIcon name="home" size={18} />
<DynamicIcon name="st-home" />          {/* préfixe st- → variant outline */}

Registre complet (lourd — tire toutes les icônes)

import { getIcon, ALL_ICONS } from '@arcpkg/mda-svgicons/all';
import { ICON_NAMES } from '@arcpkg/mda-svgicons/names';     // string[] pour parcourir le set

Le chargement paresseux (loadIcon/DynamicIcon) repose sur import.meta.glob et nécessite un bundler Vite.

Props de SvgIcon

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | icon | IconData | — | Données importées (import home from '@arcpkg/mda-svgicons/icons/home') | | size | number | 15 | Hauteur visuelle en px (largeur au ratio du glyphe) | | color | string | currentColor | Couleur (hérite du color CSS par défaut) | | variant | 'solid' \| 'outline' | 'solid' | Plein ou contour (reproduit les jumelles st-*) | | strokeWidth | number | 32 | Épaisseur du trait en unités viewBox (outline) | | title | string | — | Libellé d'accessibilité (sinon aria-hidden) |

✨ Pourquoi c'est optimisé

• Un module de données par icône (icons/<name>.ts → ["<path d>", width]) : importer home ne tire que ~0,3 Ko, pas les 4,8 Mo de la source.
• Solid + outline = une seule entrée : la source livre chaque glyphe deux fois (X plein et st-X contour) mais avec le path/viewBox identiques ; on stocke le path une fois et on reproduit le contour via variant.
• currentColor + taille à ratio correct : hérite du color CSS ; size fixe la hauteur et la largeur suit le ratio réel (l'export brut forçait 24×24).
• Chargement paresseux par nom : Vite import.meta.glob découpe chaque icône en chunk séparé.

🛠️ (Re)génération

Données et miroir js/ produits par le builder commun (hors package) :

npm run build     # node ../mda-icons/build-svgicons.mjs (alimente aussi @arcpkg/native-mda-svgicons)

📁 Structure (plugin npm)

@arcpkg/mda-svgicons/
  package.json        # main: index.ts, publishConfig.access: public, MIT
  index.ts            # API publique
  SvgIcon.tsx  DynamicIcon.tsx  loader.ts  types.ts
  names.ts  all.ts    # générés
  icons/<name>.ts     # 2583 modules de données générés
  js/                 # miroir compilé (esbuild) : index.js, *.js, icons/*.js
  README.md  tsconfig.json

📄 Licence

MIT © INICODE