fut-icons

fut-icons é uma biblioteca de ícones em React para times de futebol, com componentes SVG gerados automaticamente a partir de arquivos .svg.

Requisitos

• Node.js 18+
• npm
• React 19+

Instalação do projeto localmente

Clone o repositório e instale as dependências:

npm install

Para gerar os componentes a partir dos arquivos SVG da pasta src/assets:

npm run generate

Para buildar a biblioteca e gerar os arquivos de distribuição:

npm run build

Como usar em um projeto React

Depois de publicar a biblioteca no npm, você pode instalar assim:

npm install fut-icons

Exemplo de uso:

import { Botafogo, Cruzeiro } from "fut-icons";

export function Example() {
  return (
    <div>
      <Botafogo size={32} />
      <Cruzeiro size={32} color="royalblue" />
    </div>
  );
}

Como criar uma dependência no npm

1. Ajuste as informações do pacote no arquivo package.json:

   • name: nome que será publicado, por exemplo fut-icons ou @seu-usuario/fut-icons
   • description
   • author
   • license

2. Gere a build:

npm run build

3. Faça login no npm:

npm login

4. Publique o pacote:

npm publish

Se quiser publicar uma versão atualizada depois:

npm version patch
npm publish

Como adicionar um novo ícone de time

1. Coloque o arquivo SVG do time na pasta src/assets. Exemplo:

src/assets/Flamengo.svg

2. Execute o gerador:

npm run generate

3. O projeto criará automaticamente:

   • um componente em src/components/icons/Flamengo.tsx
   • uma exportação no arquivo src/components/index.ts

4. O nome do componente será derivado do nome do arquivo em PascalCase. Exemplo:

   • Flamengo.svg → Flamengo
   • Atletico-MG.svg → AtleticoMG

5. Você pode usar o novo ícone assim:

import { Flamengo } from "fut-icons";

<Flamengo size={40} />;

Estrutura importante

• src/assets: arquivos SVG dos ícones
• src/components/icons: componentes React gerados automaticamente
• src/components/IconBase.tsx: base comum para todos os ícones
• src/index.ts: ponto de entrada da biblioteca

Observações

• Os componentes são gerados automaticamente a partir dos SVGs.
• O projeto já usa react e react-dom como peerDependencies, então quem consumir a biblioteca precisará ter esses pacotes instalados no projeto.
• Para testar a biblioteca localmente antes de publicar, você pode usar npm link em um projeto de teste.