Servidor MCP de Phosphor Icons

Un servidor del Protocolo de Contexto de Modelo (MCP) que proporciona acceso a Phosphor Icons, una familia de iconos flexible con 6 grosores diferentes y más de 1.000 iconos.

Importante: Este es un servidor MCP impulsado por la comunidad y asistido por IA, y no es un repositorio oficial ni está afiliado al proyecto Phosphor Icons. Este proyecto fue creado con asistencia de IA y es mantenido por la comunidad. El proyecto original de Phosphor Icons se puede encontrar en https://github.com/phosphor-icons.

Características

• 🎨 6 grosores de icono: thin (fino), light (ligero), regular (normal), bold (negrita), fill (relleno) y duotone (duotono)

• 🌈 Personalización de color: Aplica cualquier color (hex, RGB, colores con nombre o currentColor)

• 📏 Control de tamaño: Especifica tamaños personalizados en píxeles

• 🔍 Búsqueda de iconos: Encuentra iconos por nombre, categoría o etiquetas

• 📦 Operaciones por lotes: Obtén múltiples iconos a la vez

• 📚 Acceso al catálogo: Explora todos los iconos disponibles con metadatos

• 🛠️ Guías de implementación: Obtén ayuda de integración específica para frameworks

Related MCP server: Iconify MCP Server

Instalación

npm install

CLI

El paquete incluye una CLI phosphor-icons para exportar recursos SVG/PNG sin llamar a MCP.

Para desarrollo local, compila primero y ejecuta la CLI compilada:

npm run build
node dist/cli.js icon heart --weight bold --color "#ef4444" --size 32 --out heart.svg
node dist/cli.js icon house user gear --format png --size 24 --dir ./icons
node dist/cli.js search arrow --limit 5
node dist/cli.js categories

Después de la instalación del paquete, usa el comando bin:

phosphor-icons icon heart --size 16 --out heart.svg
phosphor-icons icon heart --format png --size 16 --out heart.png
phosphor-icons search arrow --limit 5
phosphor-icons categories

Comandos de la CLI:

• icon <name...>: Obtiene uno o más iconos como SVG o PNG.

• search <query>: Busca nombres de iconos más metadatos incluidos.

• categories: Lista las categorías incluidas y ejemplos.

• skill path: Imprime la ruta del directorio de habilidades Codex incluido.

Flags para icon:

• --weight, -w: thin, light, regular, bold, fill o duotone.

• --color, -c: Cualquier valor de color SVG, incluyendo currentColor.

• --size, -s: Tamaño en píxeles para ancho y alto.

• --format, -f: svg o png.

• --out, -o: Archivo de salida para un solo icono.

• --dir, -d: Directorio de salida para exportaciones por lotes.

La CLI lee los iconos del paquete @phosphor-icons/core instalado primero. Esto mantiene la exportación de iconos rápida, determinista y sin conexión después de npm install. Si los recursos locales no están disponibles, recurre a la URL raw de GitHub de Phosphor Core.

Prueba de humo de la CLI

npm install
npm run build
node dist/cli.js icon heart --size 16 --out live-heart.svg
node dist/cli.js icon heart --format png --size 16 --out live-heart.png
node dist/cli.js search arrow --limit 5

Se espera:

• live-heart.svg contiene width="16" height="16".

• live-heart.png se crea con un tamaño de archivo distinto de cero.

• La búsqueda devuelve nombres de iconos relacionados con flechas.

Extensión de Habilidades

Este paquete incluye una habilidad de Codex/Agents en skills/phosphor-icons/SKILL.md. Después de instalar el paquete, localízalo con:

phosphor-icons skill path

La habilidad proporciona a los agentes reglas concisas para la búsqueda, recuperación, exportación e implementación de frameworks de iconos. Usa esta ruta al registrar la habilidad con un tiempo de ejecución de agente o al copiar la habilidad en un directorio de habilidades de agente.

Compatibilidad con la CLI de habilidades de Vercel

El repositorio es compatible con el formato de CLI skills de Vercel Labs: las habilidades residen en skills/<name>/SKILL.md y el archivo comienza con el frontmatter YAML name y description.

Lista las habilidades de este repositorio:

npm run skills:list
# or
npx skills add . --list

Instala la habilidad incluida desde un checkout local:

npx skills add . --skill phosphor-icons --agent codex --copy -y

Instala desde GitHub después de publicar:

npx skills add lasaths/phosphor-icons-mcp --skill phosphor-icons --agent codex -y

Instala desde un checkout de paquete npm resolviendo la ruta de la habilidad:

phosphor-icons skill path
npx skills add ./skills/phosphor-icons --agent codex --copy -y

Desarrollo

Ejecuta el servidor de desarrollo:

npm run dev

Esto iniciará el servidor en el puerto 8081 y abrirá el playground de Smithery para pruebas.

Configuración

El servidor admite un parámetro de configuración opcional:

• defaultWeight: Establece el grosor de icono predeterminado (thin, light, regular, bold, fill, duotone). Predeterminado: regular

Herramientas

get-icon

Recupera uno o más iconos SVG de la biblioteca Phosphor Icons. Proporciona un nombre de icono único o una matriz de nombres para la recuperación por lotes.

Parámetros:

• name (string, opcional): Nombre del icono único en kebab-case (ej., 'arrow-left', 'user'). Úsalo para un solo icono.

• names (array, opcional): Matriz de nombres de iconos para recuperación por lotes. Úsalo para múltiples iconos.

• weight (opcional): Grosor/estilo del icono

• color (opcional): Color del icono - acepta hex (#FF0000), RGB (rgb(255,0,0)), colores con nombre (red) o 'currentColor'

• size (opcional): Tamaño del icono en píxeles (establece tanto el ancho como el alto)

• format (opcional): Formato de salida (svg o png). Predeterminado: svg

• saveToFile (opcional): Ruta para guardar el archivo PNG (solo para un icono)

• saveDir (opcional): Directorio para guardar archivos PNG (solo para múltiples iconos)

Ejemplos:

get-icon name="heart" weight="bold" color="#FF0000"
get-icon names=["star", "heart"] weight="fill" color="gold" size=48
get-icon name="user" color="currentColor"

search-icons

Busca iconos por nombre, categoría o etiquetas.

Parámetros:

• query (string): Término de búsqueda

• limit (opcional): Resultados máximos a devolver (predeterminado: 10)

Ejemplo:

search-icons query="arrow" limit=5

list-categories

Obtén una lista de todas las categorías de iconos disponibles.

Recursos

phosphor://catalog

Catálogo completo de iconos populares de Phosphor con metadatos que incluyen categorías, etiquetas y grosores disponibles.

phosphor://weights

Información detallada sobre los 6 grosores/estilos de icono disponibles y sus mejores casos de uso.

Prompts

implement-icon

Obtén orientación sobre cómo implementar un icono de Phosphor en tu proyecto.

Parámetros:

• iconName (string): Nombre del icono

• framework (string): Framework frontend (html, react, vue, svelte, angular)

Publicación en Smithery

1. Envía tu código a GitHub

2. Visita smithery.ai/new

3. Conecta tu repositorio de GitHub

4. Configura despliegues automáticos

Grosores de icono

• Thin: Trazos delicados y minimalistas - mejor para tamaños grandes

• Light: Apariencia sutil y refinada - diseños modernos

• Regular: Equilibrado, versátil - uso general (predeterminado)

• Bold: Fuerte, impactante - énfasis y tamaños pequeños

• Fill: Formas sólidas y rellenas - énfasis fuerte

• Duotone: Diseño de dos tonos - interés visual

Ejemplos

Obtén un icono de corazón rojo en negrita:

// Returns SVG content for a bold red heart icon
get-icon({ name: "heart", weight: "bold", color: "#FF0000" })

Obtén un icono de estrella azul en un tamaño personalizado:

// Returns a 48px blue filled star icon
get-icon({ name: "star", weight: "fill", color: "#3B82F6", size: 48 })

Busca iconos de navegación:

// Returns list of icons related to navigation
search-icons({ query: "navigation", limit: 10 })

Obtén múltiples iconos de colores para una interfaz de usuario:

// Get home, user, and settings icons all in blue
get-icon({ 
  names: ["home", "user", "gear"],
  weight: "regular",
  color: "#3B82F6",
  size: 24
})

Descargo de responsabilidad

SIN GARANTÍA NI RESPONSABILIDAD

ESTE SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A LAS GARANTÍAS DE COMERCIABILIDAD, IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS AUTORES O TITULARES DE LOS DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGUNA RECLAMACIÓN, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN DE CONTRATO, AGRAVIO O DE OTRO TIPO, QUE SURJA DE, FUERA DE O EN RELACIÓN CON EL SOFTWARE O EL USO U OTROS TRATOS EN EL SOFTWARE.

ÚSALO BAJO TU PROPIO RIESGO

• Este es un proyecto no oficial impulsado por la comunidad creado con asistencia de IA

• El software se proporciona sin garantías ni soporte

• Los usuarios son responsables de probar y validar el software para sus casos de uso

• Los mantenedores no son responsables de ningún daño, pérdida de datos o problemas derivados del uso de este software

• Este proyecto no está respaldado ni afiliado al proyecto oficial Phosphor Icons

Licencia

Este servidor MCP tiene licencia MIT. Los iconos de Phosphor también tienen licencia MIT.

Enlaces

• 🌐 Sitio web de Phosphor Icons

• 💻 Repositorio original de Phosphor Icons (Oficial)

• 📦 Phosphor Icons Core

• 📖 Documentación de Smithery

• 🔧 Protocolo MCP

Créditos

• Iconos: Proporcionados por Phosphor Icons - creados por Tobias Fried

• Servidor MCP: Proyecto impulsado por la comunidad creado con asistencia de IA

• Mantenedores: Colaboradores de la comunidad (no afiliados a Phosphor Icons)