1.0.10 • Published 6 months ago
icons-ahp-library v1.0.10
iCoNs LiBrArY 'AHP'
Une bibliothèque d'icônes SVG légère et facile à intégrer dans vos projets web. Vous pouvez facilement inclure et utiliser ces icônes via un lien CDN ou les télécharger et les intégrer localement.
Importation
Lien CDN
Ajoutez simplement ce script à votre HTML () :
<script src="https://cdn.jsdelivr.net/npm/icons-ahp-library/dist/icons.js"></script>
1. Importer depuis le CDN (comme Feather Icons)
Si tu veux les utiliser directement sans installation, tu peux charger le script CDN dans ton HTML :
➡ HTML :
html
Copier
Modifier
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Test Icons</title>
<script src="https://unpkg.com/icons-ahp-library"></script>
</head>
<body>
<!-- Exemple d'icône -->
<i data-icon="mute"></i>
<script>
MyIcons.replace(); // Remplace <i data-icon=""> par le SVG correspondant
</script>
</body>
</html>
✅ Avantages : Facile à utiliser, pas besoin d'installation.
📌 2. Importer via npm (pour React, Vue, etc.)
Si tu veux utiliser ton package dans un projet JavaScript / TypeScript, installe-le avec npm :
sh
Copier
Modifier
npm install icons-ahp-library
Puis importe-le dans ton projet JavaScript :
js
Copier
Modifier
import MyIcons from "icons-ahp-library";
// Ajouter un icône dynamiquement en JS
document.body.innerHTML += MyIcons.fleched;
Ou dans TypeScript :
ts
Copier
Modifier
import MyIcons from "icons-ahp-library";
const iconElement = document.createElement("div");
iconElement.innerHTML = MyIcons.mute;
document.body.appendChild(iconElement);
✅ Avantages : Plus propre pour un projet structuré, compatible avec TypeScript.
📌 3. Utiliser avec React
Dans un projet React, tu peux créer un composant qui affiche tes icônes :
jsx
Copier
Modifier
import MyIcons from "icons-ahp-library";
const Icon = ({ name, size = 24, color = "black" }) => {
return (
<span
dangerouslySetInnerHTML={{ __html: MyIcons[name] || "" }}
style={{ width: size, height: size, color }}
/>
);
};
export default function App() {
return (
<div>
<h1>Mes Icônes</h1>
<Icon name="fleched" size={50} color="red" />
<Icon name="mute" size={40} color="blue" />
</div>
);
}
✅ Avantages : Compatible avec React et personnalisable.
📌 4. Utiliser avec Vue.js
Si tu utilises Vue.js, tu peux créer un composant pour afficher une icône :
vue
Copier
Modifier
<template>
<div v-html="icon"></div>
</template>
<script>
import MyIcons from "icons-ahp-library";
export default {
props: ["name"],
computed: {
icon() {
return MyIcons[this.name] || "";
},
},
};
</script>
---------------
Push mes modifs npm:
'npm version patch'
'npm publish'
MAJ:
'npm login'
'npm publish --tag beta'