{"_id":"@arcpkg/mda-svgicons","name":"@arcpkg/mda-svgicons","dist-tags":{"beta":"0.0.1-beta.0.1","latest":"0.0.1-beta.0.1"},"versions":{"0.0.1-beta.0.1":{"name":"@arcpkg/mda-svgicons","publishConfig":{"access":"public"},"version":"0.0.1-beta.0.1","description":"MDA-SVGICONS fournit les icônes MDA sous forme de composants React SVG (variantes solid et outline), avec import par sous-chemin pour un tree-shaking optimal et une taille (size) pouvant être responsive ou pilotée par le scroll.","main":"index.ts","types":"index.ts","keywords":["icons","svg","react","responsive","mda","tree-shaking"],"author":{"name":"INICODE","email":"contact.inicode@gmail.com"},"license":"MIT","scripts":{"init":"npm init --scope=@arcpkg/mda-svgicons","build":"node ../mda-icons/build-svgicons.mjs","login":"npm login"},"devDependencies":{},"dependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_id":"@arcpkg/mda-svgicons@0.0.1-beta.0.1","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-aZ5Pb1vV4YBvQZUhTOr5UNssR6zh2XRF/nWJ7DjHc3Qd32AYkn9foIpgrpEx3MvcSHmJ0Qe4XpiwkMrQ76vJnQ==","shasum":"56936fe1bd778826f752e425969a00d541171a41","tarball":"https://registry.npmjs.org/@arcpkg/mda-svgicons/-/mda-svgicons-0.0.1-beta.0.1.tgz","fileCount":5186,"unpackedSize":3751472,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE1YyxTkF1SCryMXrlcSrhyFpZGwDWxrnLtTL1YNtkTBAiA1/ZWU/qMQ44FXWHoEyldLJQakjJeTwhj9b2DHkxZTNA=="}]},"_npmUser":{"name":"inicode12","email":"contact.inicode@gmail.com"},"directories":{},"maintainers":[{"name":"inicode12","email":"contact.inicode@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mda-svgicons_0.0.1-beta.0.1_1789053531545_0.912373584231329"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-10T15:18:48.079Z","0.0.1-beta.0.1":"2026-09-10T15:18:51.744Z","modified":"2026-09-10T15:18:55.802Z"},"maintainers":[{"name":"inicode12","email":"contact.inicode@gmail.com"}],"description":"MDA-SVGICONS fournit les icônes MDA sous forme de composants React SVG (variantes solid et outline), avec import par sous-chemin pour un tree-shaking optimal et une taille (size) pouvant être responsive ou pilotée par le scroll.","keywords":["icons","svg","react","responsive","mda","tree-shaking"],"author":{"name":"INICODE","email":"contact.inicode@gmail.com"},"license":"MIT","readme":"# @arcpkg/mda-svgicons\n\n[](LICENSE)\n\n\n\n**@arcpkg/mda-svgicons** est un jeu d'icônes SVG **React (DOM)** optimisé et tree-shakeable,\ngénéré depuis `mda-icons/icons.json` (style FontAwesome, 2583 glyphes × 2 styles).\nPublié selon la convention des plugins `@arcpkg/*` : source TypeScript à la racine\n(`main: index.ts`) + miroir compilé `js/`.\n\n## 📦 Installation\n\n### Via npm/yarn/pnpm\n\n```bash\nnpm install @arcpkg/mda-svgicons react react-dom\n# ou\nyarn add @arcpkg/mda-svgicons react react-dom\n# ou\npnpm add @arcpkg/mda-svgicons react react-dom\n```\n\n### Dépendances requises\n- React 18+\n- React DOM 18+\n- TypeScript 5.0+ (recommandé)\n- Un bundler (Vite recommandé) — le chargement paresseux par nom utilise\n `import.meta.glob`\n\n## 🚀 Démarrage rapide\n\n```tsx\nimport { SvgIcon } from '@arcpkg/mda-svgicons';\nimport home from '@arcpkg/mda-svgicons/icons/home'; // tree-shaking : seul `home` est inclus\n\nexport function Demo() {\n return (\n <>\n {/* 13px, currentColor, solid */}\n \n \n \n );\n}\n```\n\n### Par nom (paresseux — icônes data-driven / sélecteurs)\n\n```tsx\nimport { DynamicIcon } from '@arcpkg/mda-svgicons';\n\n\n {/* préfixe st- → variant outline */}\n```\n\n### Registre complet (lourd — tire toutes les icônes)\n\n```ts\nimport { getIcon, ALL_ICONS } from '@arcpkg/mda-svgicons/all';\nimport { ICON_NAMES } from '@arcpkg/mda-svgicons/names'; // string[] pour parcourir le set\n```\n\n> Le chargement paresseux (`loadIcon`/`DynamicIcon`) repose sur `import.meta.glob`\n> et nécessite un bundler Vite.\n\n### Props de `SvgIcon`\n\n| Prop | Type | Défaut | Description |\n|------|------|--------|-------------|\n| `icon` | `IconData` | — | Données importées (`import home from '@arcpkg/mda-svgicons/icons/home'`) |\n| `size` | `number` | `15` | Hauteur visuelle en px (largeur au ratio du glyphe) |\n| `color` | `string` | `currentColor` | Couleur (hérite du `color` CSS par défaut) |\n| `variant` | `'solid' \\| 'outline'` | `'solid'` | Plein ou contour (reproduit les jumelles `st-*`) |\n| `strokeWidth` | `number` | `32` | Épaisseur du trait en unités viewBox (outline) |\n| `title` | `string` | — | Libellé d'accessibilité (sinon `aria-hidden`) |\n\n## ✨ Pourquoi c'est optimisé\n\n- **Un module de données par icône** (`icons/.ts` → `[\"\", width]`) :\n importer `home` ne tire que ~0,3 Ko, pas les 4,8 Mo de la source.\n- **Solid + outline = une seule entrée** : la source livre chaque glyphe deux fois\n (`X` plein et `st-X` contour) mais avec le `path`/`viewBox` *identiques* ; on\n stocke le path une fois et on reproduit le contour via `variant`.\n- **`currentColor` + taille à ratio correct** : hérite du `color` CSS ; `size` fixe\n la hauteur et la largeur suit le ratio réel (l'export brut forçait 24×24).\n- **Chargement paresseux par nom** : Vite `import.meta.glob` découpe chaque icône\n en chunk séparé.\n\n## 🛠️ (Re)génération\n\nDonnées et miroir `js/` produits par le builder commun (hors package) :\n\n```bash\nnpm run build # node ../mda-icons/build-svgicons.mjs (alimente aussi @arcpkg/native-mda-svgicons)\n```\n\n## 📁 Structure (plugin npm)\n\n```\n@arcpkg/mda-svgicons/\n package.json # main: index.ts, publishConfig.access: public, MIT\n index.ts # API publique\n SvgIcon.tsx DynamicIcon.tsx loader.ts types.ts\n names.ts all.ts # générés\n icons/.ts # 2583 modules de données générés\n js/ # miroir compilé (esbuild) : index.js, *.js, icons/*.js\n README.md tsconfig.json\n```\n\n## 📄 Licence\n\nMIT © INICODE\n","readmeFilename":"README.md","_rev":"1-d0db5de5a572cb4a1cadc524f97554d4"}