Lucide Icons

Proporciona acceso a la biblioteca de iconos Lucide para su uso en aplicaciones de LLM y agentes.

GitHub
42
Prueba este MCPPatrocinado

Documentación

lucide-icons-mcp

Ask DeepWiki

Un servidor del Protocolo de Contexto de Modelo (MCP) que expone los iconos de Lucide React como recursos y herramientas para LLMs y aplicaciones agénticas. Construido con Bun y el SDK de TypeScript de MCP.

¿Qué es Lucide?

Lucide es un kit de iconos hermoso y consistente creado por la comunidad. Es una biblioteca de iconos de código abierto que proporciona más de 1,500 iconos cuidadosamente diseñados en un estilo único y consistente. Originalmente bifurcado de Feather Icons, Lucide se ha convertido en una de las bibliotecas de iconos más populares para el desarrollo web moderno.

¿Qué es MCP?

El Protocolo de Contexto de Modelo (MCP) es un estándar para que las herramientas de IA soliciten contexto específico de fuentes fuera de sus datos principales de entrenamiento.

Este servidor MCP permite a los asistentes de codificación con IA y otras aplicaciones agénticas acceder a información sobre los iconos de Lucide React, lo que permite una mejor asistencia con la búsqueda, descubrimiento e implementación de iconos.

Características

  • 🔍 Búsqueda de iconos: Busca entre más de 1,500 iconos de Lucide por nombre o categoría
  • 📂 Exploración por categorías: Lista iconos por categorías (Diseño, Comunicación, Multimedia, etc.)
  • 💡 Ejemplos de uso: Obtén ejemplos de código React/JSX para cualquier icono
  • 🔧 Información de iconos: Información detallada sobre cada icono
  • 🚀 Integración MCP: Listo para Claude Desktop y otros clientes MCP
  • 🌐 Modo dual: Servidor HTTP o servidor MCP basado en stdio
  • 📊 Cobertura completa: Todos los iconos de Lucide con uso correcto de JSX

Requisitos previos

Primeros pasos (Desarrollo)

1. Clonar el repositorio

git clone https://github.com/SeeYangZhi/lucide-icons-mcp.git
cd lucide-icons-mcp

2. Instalar Bun (si no lo tienes)

Consulta la guía oficial de instalación de Bun.
Después de la instalación, reinicia tu terminal y verifica:

bun --version

3. Instalar dependencias

bun install

4. Compilar el proyecto

Esto compila el código fuente de TypeScript a JavaScript en el directorio build.

bun run build

Uso

Modo HTTP

Puedes ejecutar el servidor HTTP usando npx:

npx lucide-icons-mcp

Esto inicia el servidor HTTP (por defecto en el puerto 3000).

O instalar globalmente:

npm install -g lucide-icons-mcp

Luego ejecutar:

lucide-icons-mcp

Modo Stdio

npx lucide-icons-mcp --stdio
# or if installed globally
lucide-icons-mcp --stdio

Desarrollo local

Hay dos formas principales de ejecutar el servidor MCP:

1. Modo HTTP

Adecuado para clientes que admiten comunicación a través de HTTP.

Para desarrollo (usando Bun):

bun run start
# or directly
bun run src/entry.ts

2. Modo Stdio

Se usa a menudo para integración directa con herramientas como Claude Desktop o el Inspector de MCP.

Para desarrollo (usando Bun):

bun run src/entry.ts --stdio

Configuración con herramientas de IA

Ejemplo: Claude Desktop

Para usar este servidor MCP en Claude Desktop:

  1. Abre tu archivo de configuración de Claude Desktop:
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
  1. Agrega el servidor a la sección mcpServers:

Opción A: mediante npx (Recomendado):

{
  "mcpServers": {
    "lucide-icons": {
      "command": "npx",
      "args": ["lucide-icons-mcp", "--stdio"]
    }
  }
}

Opción B: Apuntando directamente a la salida de compilación:

{
  "mcpServers": {
    "lucide-icons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/lucide-icons-mcp/build/entry.js", "--stdio"]
    }
  }
}
  1. Guarda el archivo y reinicia Claude Desktop.
  2. Ahora deberías ver el servidor "lucide-icons" disponible en el panel de herramientas de Claude.

Herramientas disponibles (MCP)

Este servidor MCP expone las siguientes herramientas a los asistentes de codificación con IA. Cada icono puede pertenecer a múltiples categorías, lo que proporciona capacidades flexibles de búsqueda y descubrimiento.

1. search_icons

  • Descripción: Busca iconos de Lucide por nombre o categoría. Devuelve iconos con sus arreglos completos de categorías.
  • Parámetros:
    • query (cadena): Término de búsqueda para nombre de icono o categoría
    • category (cadena opcional): Filtrar por categoría específica
    • limit (número opcional): Máximo de resultados a devolver
  • Devuelve: Arreglo de iconos con name y categories (arreglo de cadenas)

2. search_categories

  • Descripción: Busca categorías de iconos por nombre de categoría usando coincidencia parcial
  • Parámetros:
    • query (cadena): Término de búsqueda para nombre de categoría
    • limit (número opcional): Máximo de resultados a devolver
  • Devuelve: Arreglo de categorías con name y iconCount

3. fuzzy_search_icons

  • Descripción: Búsqueda difusa de iconos de lucide por nombre de icono
  • Parámetros:
    • query (cadena): Término de búsqueda para icono
    • limit (número opcional): Máximo de resultados a devolver
  • Devuelve: Arreglo de iconos con name y categories (arreglo de cadenas)

4. fuzzy_search_categories

  • Descripción: Búsqueda difusa de categorías de iconos por nombre de categoría
  • Parámetros:
    • query (cadena): Término de búsqueda para nombre de categoría
    • limit (número opcional): Máximo de resultados a devolver
  • Devuelve: Arreglo de categorías con name y iconCount (arreglo de cadenas)

5. get_icon_usage_examples

  • Descripción: Obtén ejemplos de uso para un icono de Lucide React por el nombre exacto
  • Parámetros:
    • name (cadena): Término de búsqueda para icono
  • Devuelve: Ejemplos de uso React/JSX para un icono específico de Lucide

6. list_all_icons_by_category

  • Descripción: Lista todos los iconos en una categoría específica
  • Parámetros:
    • category (cadena): Nombre de la categoría para listar iconos
    • limit (número opcional): Máximo de resultados a devolver

7. list_all_categories

  • Descripción: Lista todas las categorías de iconos disponibles con sus recuentos de iconos

Ejemplo de uso

Así es como una herramienta de IA podría usar este servidor MCP:

Ejemplo 1: Encontrar iconos

Usuario: "Encuéntrame iconos relacionados con ArrowRight"

La herramienta de IA llama a search_icons:

{
  "query": "ArrowRight",
  "limit": 5
}

Respuesta: Lista iconos como ArrowRight

Ejemplo 2: Obtener ejemplos de uso

Usuario: "Muéstrame cómo usar el icono ArrowRight"

La herramienta de IA llama a get_icon_usage_examples:

{
  "name": "ArrowRight"
}

Respuesta:

import { ArrowRight } from "lucide-react";

function Example() {
  return (
    <div>
      <ArrowRight />
    </div>
  );
}

Ejemplo 3: Explorar categorías

Usuario: "¿Qué iconos relacionados con diseño están disponibles?"

La herramienta de IA llama a search_categories:

{
  "query": "design"
}

Luego llama a list_icons_by_category":

{
  "category": "Design",
  "limit": 10
}

Categorías de iconos

Los iconos de Lucide están organizados en categorías como:

  • Accesibilidad
  • Cuentas y acceso
  • Animales
  • Flechas
  • Marcas
  • Edificios
  • Gráficos
  • Comunicación
  • Conectividad
  • Cursores
  • Diseño
  • Codificación y desarrollo
  • Dispositivos
  • Emoji
  • Iconos de archivos
  • Finanzas
  • Alimentos y bebidas
  • Juegos
  • Hogar
  • Diseño
  • Correo
  • Matemáticas
  • Médico
  • Multimedia
  • Naturaleza
  • Navegación
  • Notificaciones
  • Personas
  • Fotografía
  • Ciencia
  • Estaciones
  • Seguridad
  • Formas
  • Compras
  • Social
  • Deportes
  • Sostenibilidad
  • Formato de texto
  • Tiempo y calendario
  • Herramientas
  • Transporte
  • Viajes
  • Clima

Pruebas locales de MCP con Inspector

Puedes probar el servidor MCP localmente usando el Inspector de MCP.

Primero, asegúrate de que el proyecto esté compilado:

bun run build

Luego inicia el Inspector:

npx @modelcontextprotocol/inspector node ./build/entry.js --stdio

Esto abre la interfaz del Inspector para pruebas interactivas de tu servidor MCP.

Scripts de desarrollo

  • bun run dev: Inicia el servidor en modo HTTP para desarrollo
  • bun run dev:stdio: Inicia el servidor MCP stdio para desarrollo
  • bun run build: Compila TypeScript a JavaScript (salida en build/)
  • bun run lint: Analiza el código base usando ESLint
  • bun run lint:fix: Corrige automáticamente problemas de linting
  • bun run crawl: Rastrea el sitio web de Lucide para actualizar los datos de iconos
  • bun run pre-build: Rastrea datos, compila metadatos de iconos y corrige linting

Fuentes de datos

Este proyecto incluye un rastreador web que extrae automáticamente información de iconos del sitio web de Lucide, lo que garantiza datos de iconos y categorías actualizados.

Recursos

Licencia

Este proyecto está licenciado bajo la Licencia MIT. Consulta LICENSE para más detalles.

Este proyecto hace referencia a iconos de Lucide (https://lucide.dev/), que están licenciados bajo su Licencia ISC:

Licencia ISC

Copyright (c) para partes de Lucide pertenecen a Cole Bemis 2013-2022 como parte de Feather (MIT). Todos los demás derechos de autor (c) para Lucide pertenecen a los Contribuyentes de Lucide 2022.

Se otorga permiso para usar, copiar, modificar y/o distribuir este software para cualquier propósito con o sin tarifa, siempre que el aviso de copyright anterior y este aviso de permiso aparezcan en todas las copias.

EL SOFTWARE SE PROPORCIONA "TAL CUAL" Y EL AUTOR RENUNCIA A TODAS LAS GARANTÍAS CON RESPECTO A ESTE SOFTWARE, INCLUYENDO TODAS LAS GARANTÍAS IMPLÍCITAS DE COMERCIABILIDAD E IDONEIDAD. EN NINGÚN CASO EL AUTOR SERÁ RESPONSABLE POR DAÑOS ESPECIALES, DIRECTOS, INDIRECTOS O CONSECUENTES, O CUALQUIER DAÑO QUE RESULTE DE LA PÉRDIDA DE USO, DATOS O BENEFICIOS, YA SEA EN UNA ACCIÓN DE CONTRATO, NEGLIGENCIA U OTRA ACCIÓN PERJUDICIAL, QUE SURJA DE O EN CONEXIÓN CON EL USO O RENDIMIENTO DE ESTE SOFTWARE.