# Circum Icons

![npm](https://img.shields.io/npm/v/@klarr-agency/circum-icons-react?label=npm%20react)
![npm](https://img.shields.io/npm/v/@klarr-agency/circum-icons-vue?color=sucess&label=npm%20vue)
![npm](https://img.shields.io/npm/v/@klarr-agency/circum-icons-svelte?color=orange&label=npm%20svelte)
[![Join the chat at https://gitter.im/Circum-Icons/community](https://badges.gitter.im/Circum-Icons/community.svg)](https://gitter.im/Circum-Icons/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

This library was created following Google material and IBM Carbon design principles. Our main goal was to keep a certain consistency throughtout all the set and ensure that each icon has the same visual weight.

Available for these frameworks 👉 React, Vue and Svelte
## Documentation
[Français](https://github.com/Klarr-Agency/Circum-Icons/blob/main/README-FR.md)
[Español](https://github.com/Klarr-Agency/Circum-Icons/blob/main/README-ES.md)

![Circum_Free-1](https://user-images.githubusercontent.com/87146097/200983971-2b1bf804-deec-490f-9ba2-088b25acc403.jpg)


## Installation

Install with 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/Examples

```javascript
// Add one of these 3 lines below corresponding to your 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"/>
// You can change color and size
<CircumIcon name="calendar" color="#000" size="48px">
```
## Features
### Array Builder
You can created an array directly on our website. Don't need to go back and forth to copy each icon name. <br>
In this example, you can see how to build a side navigation 🏗👇
You can find this example here [Circum-Icons-SvelteKit-Demo](https://github.com/Klarr-Agency/Circum-Icons-SvelteKit-Demo)

### Create Properties
Now you can save more time by adding new properties in your array. Remember you need to be in object mode <br>
if you want to see the properties section.
😉😎🤓
<div style="margin-bottom:12px;"></div>

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


## Icons

You can see the list of available icons on [circumicons.com](https://circumicons.com)

## Roadmap
- [X] Property manager (Possibility to add new properties in the Array Builder) 🏗
- [ ] Add keywords to search terms 🔎
- [X] Download icons in color of choice 🎨
- [X] Resize icons on the fly 🚀
- [ ] Clipboard options in single selection type (Component tag vs SVG).📌
- [ ] Animate version 🎬
- [ ] Duo tone & solid style for all 285 icons 😻
- [ ] Premium access // Array Builder for 809 icons, Component Builder and more. 💸
- [ ] Add icons to Elementor for WordPress 📰

## Where to find us! 👀
- [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)

## Authors

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