@jsarc/native-mda-svgicons

@jsarc/native-mda-svgicons est un jeu d'icônes SVG React Native (react-native-svg) optimisé et tree-shakeable, généré depuis mda-icons/icons.json. Jumeau natif de mda-svgicons — mêmes données, mêmes noms. Publié selon la convention des plugins @jsarc/* : source TypeScript à la racine (main: index.ts) + miroir compilé js/.

📦 Installation

Via npm/yarn/pnpm

npm install @jsarc/native-mda-svgicons react react-native react-native-svg
# ou
yarn add @jsarc/native-mda-svgicons react react-native react-native-svg
# ou
pnpm add @jsarc/native-mda-svgicons react react-native react-native-svg

Projet Expo

npm install @jsarc/native-mda-svgicons
npx expo install react-native-svg

Dépendances requises

• React 18+
• React Native 0.7+ (Expo 50+ compatible)
• react-native-svg 13+ (déjà présent dans native-arcjs-app)
• TypeScript 5.0+ (recommandé)

🚀 Démarrage rapide

import { SvgIcon, IconStyle } from '@jsarc/native-mda-svgicons';
import home from '@jsarc/native-mda-svgicons/icons/home';   // importer seulement l'utile

export function Demo() {
  return (
    <>
      <SvgIcon icon={home} size={13} color="#1976d2" />
      <SvgIcon icon={home} variant="outline" />

      {/* Hérite couleur + taille du contexte (≈ currentColor + font-size) */}
      <IconStyle color="#1976d2" size={28}>
        <SvgIcon icon={home} />
      </IconStyle>
    </>
  );
}

Par nom (tire le registre complet)

Metro n'a pas d'import.meta.glob, donc ceci embarque toutes les icônes — réservé aux sélecteurs / icônes data-driven :

import { DynamicIcon } from '@jsarc/native-mda-svgicons/dynamic';

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

import { getIcon } from '@jsarc/native-mda-svgicons/all';
import { ICON_NAMES } from '@jsarc/native-mda-svgicons/names';

Props de SvgIcon

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | icon | IconData | — | Données importées (import home from '@jsarc/native-mda-svgicons/icons/home') | | size | number | hérité IconStyle (15) | Hauteur visuelle (largeur au ratio du glyphe) | | color | string | hérité IconStyle | Couleur de remplissage / trait | | variant | 'solid' \| 'outline' | 'solid' | Plein ou contour (reproduit les jumelles st-*) | | strokeWidth | number | 32 | Épaisseur du trait en unités viewBox (outline) |

✨ Pourquoi c'est optimisé

• Un module de données par icône (icons/<name>.ts) : sous Metro (sans tree-shaking), importer un glyphe directement est le seul moyen d'éviter d'embarquer les 2583.
• Solid + outline = une seule entrée : la jumelle contour (st-*) est reproduite au rendu via variant (fill:none; stroke; stroke-width:32; round).
• Contexte IconStyle remplaçant currentColor + font-size : couleur et taille héritent du plus proche <IconStyle>.

🛠️ (Re)génération

npm run build     # node ../mda-icons/build-svgicons.mjs (écrit les deux packages)

📁 Structure (plugin npm)

@jsarc/native-mda-svgicons/
  package.json        # main: index.ts, publishConfig.access: public, MIT
  index.ts            # API publique (SvgIcon, IconStyle, types, noms)
  SvgIcon.tsx  DynamicIcon.tsx  dynamic.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)
  README.md  tsconfig.json

📄 Licence

MIT © INICODE