Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Klarr-Agency/Circum-Icons
Circum is a open source icon library following Google Material Design principles. Every icon was made using a 24x24 grid.
https://github.com/Klarr-Agency/Circum-Icons
circum free google-material icon-library icon-pack icons opensource pack react react-icons reactjs svelte svelte-icon svelte-icons sveltekit svg svg-icons vue vue-icons vuejs
Last synced: 3 months ago
JSON representation
Circum is a open source icon library following Google Material Design principles. Every icon was made using a 24x24 grid.
- Host: GitHub
- URL: https://github.com/Klarr-Agency/Circum-Icons
- Owner: Klarr-Agency
- License: mpl-2.0
- Created: 2022-04-05T15:49:25.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-20T18:44:19.000Z (9 months ago)
- Last Synced: 2024-11-01T16:05:35.677Z (3 months ago)
- Topics: circum, free, google-material, icon-library, icon-pack, icons, opensource, pack, react, react-icons, reactjs, svelte, svelte-icon, svelte-icons, sveltekit, svg, svg-icons, vue, vue-icons, vuejs
- Language: JavaScript
- Homepage: https://circumicons.com
- Size: 2.33 MB
- Stars: 177
- Watchers: 2
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README-ES.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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)
## 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
// Puedes cambiar el color y el tamaño
```
## 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.
En este ejemplo, puedes ver cómo construir una navegación lateral 🏗👇
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
si quieres ver la sección de propiedades.
😉😎🤓
## 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)