icons-cool-vue

Biblioteca de iconos como componentes Vue (Vue 3 + TypeScript). Incluye más de 440 iconos listos para usar.

📦 Instalación

npm install icons-cool-vue

🚀 Uso

Opción 1: Registro global (todos los iconos)

Registra todos los iconos globalmente en tu aplicación Vue:

// main.ts o main.js
import { createApp } from 'vue'
import App from './App.vue'
import IconLibrary from 'icons-cool-vue'

const app = createApp(App)
app.use(IconLibrary)
app.mount('#app')

Ahora puedes usar cualquier icono en tus componentes sin importarlos:

<template>
  <div>
    <IconArrowDown />
    <IconCalendar />
    <IconBell />
    <IconUser />
  </div>
</template>

Opción 2: Import individual (recomendado para tree-shaking)

Importa solo los iconos que necesites:

<script setup>
import { IconArrowDown, IconCalendar, IconBell, IconUser } from 'icons-cool-vue'
</script>

<template>
  <div>
    <IconArrowDown />
    <IconCalendar />
    <IconBell />
    <IconUser />
  </div>
</template>

Opción 3: Import directo de componente

<script setup>
import IconArrowDown from 'icons-cool-vue/src/icons/IconArrowDown.vue'
</script>

<template>
  <IconArrowDown />
</template>

🎨 Personalización

Todos los iconos aceptan las props de IconBase:

<template>
  <!-- Tamaño personalizado -->
  <IconArrowDown :size="32" />
  
  <!-- Color personalizado con clases -->
  <IconCalendar customClass="text-blue-500" />
  
  <!-- ViewBox personalizado -->
  <IconBell viewBox="0 0 24 24" />
  
  <!-- Accesibilidad -->
  <IconUser :ariaHidden="false" aria-label="Usuario" />
</template>

Props disponibles:

• size: Tamaño del icono (número o string, default: 24)
• viewBox: ViewBox del SVG (string, default: '0 0 24 24')
• customClass: Clases CSS personalizadas (string, objeto o array)
• ariaHidden: Ocultar del lector de pantalla (boolean, default: true)

📚 Iconos disponibles

La librería incluye más de 440 iconos organizados en categorías:

• Arrow (70+): Flechas y direcciones
• Calendar (14): Calendarios y relojes
• Communication (25): Campanas, chat, correo
• Edit (72): Herramientas de edición
• Environment (13): Elementos del entorno
• File (39): Archivos y carpetas
• Interface (73): Elementos de interfaz
• Media (22): Controles multimedia
• Menu (16): Menús y navegación
• Navigation (18): Navegación
• Shape (6): Formas geométricas
• System (37): Sistema y dispositivos
• User (13): Usuarios
• Warning (20): Alertas y advertencias

📋 Catálogo Visual de Iconos