# Circum Icons

Cette collection a été créée suivant les principes de design, Google Material et IBM Carbon. Notre objectif principal était de garder une certaine consistance à travers toute la collection et de s'assurer que chaque icône soit du même poids visuellement.

Disponible pour ces frameworks 👉 React, Vue and Svelte

## Documentation
[English](https://github.com/Klarr-Agency/Circum-Icons/blob/main/README.md)

![Circum_Link (1)](https://user-images.githubusercontent.com/87146097/178076202-fbf32509-ec2e-4682-9a1a-ba7eb2da5c58.png)


## Installation

Installer avec npm

### React
```bash
  npm i -D @klarr-agency/circum-icons-react
```
### Vue.js
```bash
  npm i -D @klarr-agency/circum-icons-vue
```
### Svelte
```bash
  npm i -D @klarr-agency/circum-icons-svelte
```

## Usage/Exemples

```javascript
// Ajouter l'une des lignes suivante selon votre framework
import CircumIcon from "@klarr-agency/circum-icons-react"; // React
import CircumIcon from "@klarr-agency/circum-icons-vue"; // Vue
import CircumIcon from "@klarr-agency/circum-icons-svelte"; // Svelte



<CircumIcon name="calendar"/>
// Vous pouvez changer la couleur et la taille
<CircumIcon name="calendar" color="#000" size="48px">
```
## Fonctionnalités
### Constructeur de liste
Vous pouvez créer une liste "array" directement sur notre site web. Vous n'avez pas besoin de naviguer entre le site et votre editeur de texte pour copier les noms d'icône que vous avez besoin. <br>
Dans l'exemple ci-dessous vous pouvez voir comment construire un menu vertical. 🏗👇
<video controls loop autoplay src="https://user-images.githubusercontent.com/87146097/178076997-3ca71b79-df70-4ab0-b28d-3d5b6d4fba80.mp4"></video>
Vous pouvez trouver l'exemple ici [Circum-Icons-SvelteKit-Demo](https://github.com/Klarr-Agency/Circum-Icons-SvelteKit-Demo)

### Ajout de propriétés
Maintenant vous pouvez sauvez encore plus de temps en ajoutant de nouvelles propriétés dans votre liste "Array". <br>
Cette option est uniquement disponible en mode objet.
😉😎🤓
<div style="margin-bottom:12px;"></div>

![new-properties](https://user-images.githubusercontent.com/87146097/183116759-b32e6aee-a3dc-449f-ba11-f87f833e1f83.gif)


## Icônes

Vous pouvez voir la liste complète des icônes sur notre site [circumicons.com](https://circumicons.com)

## Roadmap
- [X] Property manager (Possibility to add new properties in the Array Builder) 🏗
- [ ] Ajouter des nouveaux termes pour facilité la recherche 🔎
- [ ] Télécharger les icônes de la couleur de votre choix 🎨
- [ ] Redimensionner le choix d'icônes 🚀
- [ ] Ajouter des options au presse-papier à la sélection simple (Component tag vs SVG).📌
- [ ] Accès premium // Ajouter les mêmes fonctionnalités pour la version payante 💸

## Où nous trouvez! 👀
- [Reddit](https://www.reddit.com/r/circumicons/)
- [Penpot Libraries](https://penpot.app/libraries-templates.html)
- [Toools Design](https://www.toools.design/free-open-source-icon-libraries)
- [Devresourc.es](https://devresourc.es/)
- [Gumroad](https://klarr.gumroad.com/l/knlpl)

## Auteur

-   [@klarr-agency](https://www.github.com/klarr-agency)
