🎨 @kodless-dev/icon-react

Composants React légers pour charger dynamiquement des icônes Lucide via un CDN GitHub Pages.

---

📦 Installation

📚 Depuis GitHub Packages

💡 Ce package n’est pas sur npm mais sur GitHub Packages.

Avec Bun

bun add @kodless-dev/icon-react

Avec npm

npm install @kodless-dev/icon-react --registry=https://npm.pkg.github.com

Avec pnpm

pnpm add @kodless-dev/icon-react --registry=https://npm.pkg.github.com

---

⚡ Utilisation

import { RemoteIcon, useIconList } from '@kodless-dev/icon-react';

export function Example() {
  const [icons, setIcons] = useState<string[]>([]);

  useEffect(() => {
    useIconList().then(setIcons);
  }, []);

  return (
    <div>
      <h3>Exemple d'icône :</h3>
      <RemoteIcon name="heart" color="red" size={48} />

      <h4>Liste d'icônes disponibles : {icons.length}</h4>
    </div>
  );
}

---

🧠 API

<RemoteIcon />

Prop	Type	Défaut	Description
name	string	—	Nom de l’icône (ex: "heart")
size	number | string	24	Taille en pixels
color	string	"currentColor"	Couleur de l’icône
className	string	undefined	Classe CSS optionnelle
cdnUrl	string	https://kodless-dev.github.io/icons-cdn/icons	Base CDN personnalisée

useIconList(cdnUrl?)

Renvoie la liste de toutes les icônes disponibles sur le CDN (JSON généré automatiquement).

const icons = await useIconList(); // ['activity', 'heart', 'github', ...]

---

🌐 CDN des icônes

Les icônes SVG sont hébergées via : https://kodless-dev.github.io/icons-cdn/icons

Exemple direct :

<img
  src="https://kodless-dev.github.io/icons-cdn/icons/heart.svg"
  alt="Heart"
/>

---

🛠️ Développement local

bun install
bun run dev

Pour builder le package :

bun run build

---

📦 Publication

Automatique (GitHub Actions)

Pousser un nouveau tag versionné :

git tag v1.0.0
git push origin v1.0.0

Le workflow publish.yml s’exécutera et publiera le package sur GitHub Packages.

Manuelle

export GITHUB_TOKEN=ghp_xxxxxxxxx
bun run build
bun publish --access public

---

🪶 Licence

MIT © kodless-dev