# Iconos Circum

Este paquete fue creado siguiendo el material de Google y los principios de diseño de IBM Carbon. Nuestro principal objetivo era mantener una cierta consistencia en todo el set y asegurarnos de que cada icono tuviera el mismo peso visual.

Disponible para estos marcos 👉 React, Vue y Svelte

## Documentación
[Français](https://github.com/Klarr-Agency/Circum-Icons/blob/main/README-FR.md)

[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)


## Instalación

Instalar con 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
```

## Uso/Ejemplos

```javascript
// Agregue una de estas 3 líneas a continuación correspondiente a su marco
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"/>
// Puedes cambiar el color y el tamaño
<CircumIcon name="calendar" color="#000" size="48px">
```
## Características
### Constructor de matrices
Puede crear una matriz directamente en nuestro sitio web. No es necesario ir y venir para copiar el nombre de cada icono. <br>
En este ejemplo, puedes ver cómo construir una navegación lateral 🏗👇
<video controls loop autoplay src="https://user-images.githubusercontent.com/87146097/178076997-3ca71b79-df70-4ab0-b28d-3d5b6d4fba80.mp4"></video>
Puede encontrar este ejemplo aquí [Circum-Icons-SvelteKit-Demo](https://github.com/Klarr-Agency/Circum-Icons-SvelteKit-Demo)

### Crear propiedades
Ahora puede ahorrar más tiempo agregando nuevas propiedades en su matriz. Recuerda que debes estar en modo objeto <br>
si quieres ver la sección de propiedades.
😉😎🤓
<div style="margin-bottom:12px;"></div>

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



## Iconos

Puede ver la lista de iconos disponibles en [circumicons.com](https://circumicons.com)

## Mapa vial
- [X] Administrador de propiedades (Posibilidad de agregar nuevas propiedades en Array Builder) 🏗
- [ ] Agrega palabras clave a los términos de búsqueda 🔎
- [ ] Iconos de descarga en el color que elijas 🎨
- [ ] Cambiar el tamaño de los iconos sobre la marcha 🚀
- [ ] Opciones del portapapeles en tipo de selección única (etiqueta de componente frente a SVG).📌
- [ ] Acceso premium // Array Builder para iconos 809, Component Builder y más. 💸


## ¡Dónde encontrarnos! 👀
- [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)

## Autores

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