mi-icon-lib

Librería de iconos SVG para React y Astro.

Instalación

npm install mi-icon-lib

Uso en React

import { HomeIcon, ArrowRightIcon, CheckIcon } from 'mi-icon-lib'

export default function App() {
  return (
    <div>
      <HomeIcon size={24} />
      <ArrowRightIcon size={20} color="blue" />
      <CheckIcon size={16} strokeWidth={3} className="text-green-500" />
    </div>
  )
}

Uso en Astro

---
import { HomeIcon } from 'mi-icon-lib'
---

<HomeIcon size={24} />

Props disponibles

| Prop | Tipo | Default | Descripción | |---------------|----------|------------------|------------------------------------------| | size | number | 24 | Tamaño en px (width y height iguales) | | color | string | "currentColor" | Color del icono | | strokeWidth | number | — | Grosor del contorno, en unidades del viewBox (0-20), no píxeles. Rango recomendado: 0.1-0.4. Si no se envía, el icono se ve sin contorno. | | filled | boolean| según el icono | Fuerza si el icono se renderiza relleno (true) o en contorno (false). Si no se envía, usa el valor por defecto de cada icono. | | className | string | — | Clases CSS adicionales | | title | string | — | Descripción para accesibilidad |

Iconos disponibles

• HomeIcon
• ArrowRightIcon
• CheckIcon
• CloseIcon
• UserIcon

Agregar un nuevo icono

1. Diseña tu icono en Figma y exporta como SVG limpio
2. Agrega el componente en src/icons.tsx:

export const NuevoIcon = createIcon('NuevoIcon', (
  <path d="..." />
))

3. Expórtalo en src/index.ts
4. Ejecuta npm run build

Publicar en npm

npm run build
npm publish --access public

Desarrollo local

Para probar la librería en otro proyecto sin publicarla:

# En mi-icon-lib/
npm run build
npm link

# En tu proyecto/
npm link mi-icon-lib