Lucide Icons

Fornece acesso à biblioteca de ícones Lucide para uso em aplicações LLM e agentes.

GitHub
42
Experimente este MCPPatrocinado

Documentação

lucide-icons-mcp

Ask DeepWiki

Um servidor Model Context Protocol (MCP) que expõe ícones do Lucide React como recursos e ferramentas para LLMs e aplicações agênticas. Construído com Bun e o SDK TypeScript do MCP.

O que é o Lucide?

O Lucide é um kit de ícones bonito e consistente feito pela comunidade. É uma biblioteca de ícones de código aberto que fornece mais de 1.500 ícones cuidadosamente elaborados em um único estilo consistente. Originalmente um fork do Feather Icons, o Lucide se tornou uma das bibliotecas de ícones mais populares para o desenvolvimento web moderno.

O que é MCP?

O Model Context Protocol (MCP) é um padrão para ferramentas de IA solicitarem contexto específico de fontes fora de seus dados de treinamento principais.

Este servidor MCP permite que assistentes de codificação de IA e outras aplicações agênticas acessem informações sobre os ícones do Lucide React, possibilitando melhor assistência com busca, descoberta e implementação de ícones.

Recursos

  • 🔍 Busca de Ícones: Pesquise entre mais de 1.500 ícones do Lucide por nome ou categoria
  • 📂 Navegação por Categorias: Liste ícones por categorias (Design, Comunicação, Mídia, etc.)
  • 💡 Exemplos de Uso: Obtenha exemplos de código React/JSX para qualquer ícone
  • 🔧 Informações do Ícone: Informações detalhadas sobre cada ícone
  • 🚀 Integração MCP: Pronto para Claude Desktop e outros clientes MCP
  • 🌐 Modo Duplo: Servidor HTTP ou servidor MCP baseado em stdio
  • 📊 Cobertura Abrangente: Todos os ícones do Lucide com uso correto de JSX

Pré-requisitos

Começando (Desenvolvimento)

1. Clone o repositório

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

2. Instale o Bun (se você não o tiver)

Consulte o guia oficial de instalação do Bun.
Após a instalação, reinicie seu terminal e verifique:

bun --version

3. Instale as dependências

bun install

4. Compile o projeto

Isso compila o código-fonte TypeScript para JavaScript no diretório build.

bun run build

Uso

Modo HTTP

Você pode executar o servidor HTTP usando npx:

npx lucide-icons-mcp

Isso inicia o servidor HTTP (padrão na porta 3000).

Ou instale globalmente:

npm install -g lucide-icons-mcp

Depois execute:

lucide-icons-mcp

Modo Stdio

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

Desenvolvimento Local

Existem duas maneiras principais de executar o servidor MCP:

1. Modo HTTP

Adequado para clientes que suportam comunicação via HTTP.

Para desenvolvimento (usando Bun):

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

2. Modo Stdio

Frequentemente usado para integração direta com ferramentas como Claude Desktop ou o MCP Inspector.

Para desenvolvimento (usando Bun):

bun run src/entry.ts --stdio

Configuração com Ferramentas de IA

Exemplo: Claude Desktop

Para usar este servidor MCP no Claude Desktop:

  1. Abra o arquivo de configuração do Claude Desktop:
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
  1. Adicione o servidor à seção mcpServers:

Opção A: via npx (Recomendado):

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

Opção B: Apontando diretamente para a saída da compilação:

{
  "mcpServers": {
    "lucide-icons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/lucide-icons-mcp/build/entry.js", "--stdio"]
    }
  }
}
  1. Salve o arquivo e reinicie o Claude Desktop.
  2. Agora você deve ver o servidor "lucide-icons" disponível no painel de ferramentas do Claude.

Ferramentas Disponíveis (MCP)

Este servidor MCP expõe as seguintes ferramentas para assistentes de codificação de IA. Cada ícone pode pertencer a múltiplas categorias, proporcionando busca e descoberta flexíveis.

1. search_icons

  • Descrição: Busca ícones do Lucide por nome ou categoria. Retorna ícones com seus arrays completos de categorias.
  • Parâmetros:
    • query (string): Termo de busca para nome do ícone ou categoria
    • category (string opcional): Filtra por categoria específica
    • limit (número opcional): Máximo de resultados a retornar
  • Retorna: Array de ícones com name e categories (array de strings)

2. search_categories

  • Descrição: Busca categorias de ícones por nome da categoria usando correspondência parcial
  • Parâmetros:
    • query (string): Termo de busca para nome da categoria
    • limit (número opcional): Máximo de resultados a retornar
  • Retorna: Array de categorias com name e iconCount

3. fuzzy_search_icons

  • Descrição: Busca difusa de ícones do lucide por nome do ícone
  • Parâmetros:
    • query (string): Termo de busca para o ícone
    • limit (número opcional): Máximo de resultados a retornar
  • Retorna: Array de ícones com name e categories (array de strings)

4. fuzzy_search_categories

  • Descrição: Busca difusa de categorias de ícones por nome da categoria
  • Parâmetros:
    • query (string): Termo de busca para nome da categoria
    • limit (número opcional): Máximo de resultados a retornar
  • Retorna: Array de categorias com name e iconCount (array de strings)

5. get_icon_usage_examples

  • Descrição: Obtém exemplos de uso para um ícone do Lucide React pelo nome exato
  • Parâmetros:
    • name (string): Termo de busca para o ícone
  • Retorna: Exemplos de uso React/JSX para um ícone específico do Lucide

6. list_all_icons_by_category

  • Descrição: Lista todos os ícones em uma categoria específica
  • Parâmetros:
    • category (string): Nome da categoria para listar ícones
    • limit (número opcional): Máximo de resultados a retornar

7. list_all_categories

  • Descrição: Lista todas as categorias de ícones disponíveis com suas contagens de ícones

Exemplo de Uso

Veja como uma ferramenta de IA pode usar este servidor MCP:

Exemplo 1: Encontrando Ícones

Usuário: "Encontre ícones relacionados a ArrowRight"

A ferramenta de IA chama search_icons:

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

Resposta: Lista ícones como ArrowRight

Exemplo 2: Obtendo Exemplos de Uso

Usuário: "Mostre-me como usar o ícone ArrowRight"

A ferramenta de IA chama get_icon_usage_examples:

{
  "name": "ArrowRight"
}

Resposta:

import { ArrowRight } from "lucide-react";

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

Exemplo 3: Navegando por Categorias

Usuário: "Quais ícones relacionados a design estão disponíveis?"

A ferramenta de IA chama search_categories:

{
  "query": "design"
}

Depois chama list_icons_by_category":

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

Categorias de Ícones

Os ícones do Lucide são organizados em categorias como:

  • Acessibilidade
  • Contas e acesso
  • Animais
  • Setas
  • Marcas
  • Edifícios
  • Gráficos
  • Comunicação
  • Conectividade
  • Cursores
  • Design
  • Codificação e desenvolvimento
  • Dispositivos
  • Emoji
  • Ícones de arquivo
  • Finanças
  • Alimentos e bebidas
  • Jogos
  • Casa
  • Layout
  • Correio
  • Matemática
  • Médico
  • Multimídia
  • Natureza
  • Navegação
  • Notificação
  • Pessoas
  • Fotografia
  • Ciência
  • Estações
  • Segurança
  • Formas
  • Compras
  • Social
  • Esportes
  • Sustentabilidade
  • Formatação de texto
  • Tempo e calendário
  • Ferramentas
  • Transporte
  • Viagem
  • Clima

Testando MCP Localmente com o Inspector

Você pode testar o servidor MCP localmente usando o MCP Inspector.

Primeiro, certifique-se de que o projeto está compilado:

bun run build

Depois inicie o Inspector:

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

Isso abre a interface do Inspector para testes interativos do seu servidor MCP.

Scripts de Desenvolvimento

  • bun run dev: Inicia o servidor em modo HTTP para desenvolvimento
  • bun run dev:stdio: Inicia o servidor MCP stdio para desenvolvimento
  • bun run build: Compila TypeScript para JavaScript (saída em build/)
  • bun run lint: Executa lint no código usando ESLint
  • bun run lint:fix: Corrige automaticamente problemas de lint
  • bun run crawl: Rastreia o site do Lucide para atualizar dados dos ícones
  • bun run pre-build: Rastreia dados, compila metadados dos ícones e corrige lint

Fontes de Dados

Este projeto inclui um rastreador web que extrai automaticamente informações de ícones do site do Lucide, garantindo dados e categorias de ícones atualizados.

Recursos

Licença

Este projeto está licenciado sob a Licença MIT. Consulte LICENSE para detalhes.

Este projeto referencia ícones do Lucide (https://lucide.dev/), que são licenciados sob sua Licença ISC:

Licença ISC

Copyright (c) para partes do Lucide é detido por Cole Bemis 2013-2022 como parte do Feather (MIT). Todos os outros direitos autorais (c) do Lucide são detidos pelos Contribuidores do Lucide 2022.

A permissão para usar, copiar, modificar e/ou distribuir este software para qualquer finalidade, com ou sem taxa, é concedida por meio deste documento, desde que o aviso de direitos autorais acima e este aviso de permissão apareçam em todas as cópias.

O SOFTWARE É FORNECIDO "COMO ESTÁ" E O AUTOR SE ISENTA DE TODAS AS GARANTIAS COM RELAÇÃO A ESTE SOFTWARE, INCLUINDO TODAS AS GARANTIAS IMPLÍCITAS DE COMERCIABILIDADE E ADEQUAÇÃO. EM NENHUM CASO O AUTOR SERÁ RESPONSÁVEL POR QUAISQUER DANOS ESPECIAIS, DIRETOS, INDIRETOS OU CONSEQUENCIAIS, OU QUAISQUER DANOS RESULTANTES DE PERDA DE USO, DADOS OU LUCROS, SEJA EM AÇÃO DE CONTRATO, NEGLIGÊNCIA OU OUTRA AÇÃO TORTUOSA, DECORRENTES DE OU EM CONEXÃO COM O USO OU DESEMPENHO DESTE SOFTWARE.