Saturnia Icons v4.1.5

Biblioteca de ícones SVG para React com mais de 1000 ícones organizados por categoria

✨ Características

• 🎨 Mais de 1000 ícones organizados por categoria
• 🎯 Múltiplas variações (Light, Bold, Mono, Colored)
• ⚡ TypeScript com tipagem completa
• 📦 Tree-shaking otimizado
• 🚀 Zero dependências (apenas React)
• 📱 Responsivo e acessível
• 🎨 Customizável com props padrão do SVG

📊 Estatísticas

• Total de Ícones: 1169
• Categorias: 16
• Variações: 4

🚀 Instalação

npm install [email protected]
# ou
yarn add [email protected]
# ou
pnpm add [email protected]

📖 Uso Básico

import { SaturniaIcons } from 'saturnia-icons';

function App() {
  return (
    <div>
      <SaturniaIcons.AddPlusLight />
      <SaturniaIcons.AddPlusBold />
      <SaturniaIcons.ArrowRightLight size={24} color="#000" />
    </div>
  );
}

⚙️ Compatibilidade com Bundlers

Esta biblioteca é compatível com todos os bundlers modernos:

• ✅ Vite - Funciona out-of-the-box
• ✅ Webpack - Funciona out-of-the-box
• ✅ Create React App - Funciona out-of-the-box
• ✅ Next.js - Funciona out-of-the-box
• ✅ Parcel - Funciona out-of-the-box
• ✅ Rollup - Funciona out-of-the-box

🔧 Solução de Problemas

Se você encontrar problemas de resolução de módulos, verifique se:

1. Versão do Node.js: Use Node.js 16+
2. Cache do bundler: Limpe o cache (npm run build -- --force)
3. Dependências: Reinstale as dependências (rm -rf node_modules && npm install)

📝 Configuração Manual (Apenas se necessário)

Vite:

// vite.config.js
export default {
  optimizeDeps: {
    include: ['saturnia-icons']
  }
};

Webpack:

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'saturnia-icons': 'node_modules/saturnia-icons/index.esm.js'
    }
  }
};

📖 Uso Avançado

import { SaturniaIcons, type IconName } from 'saturnia-icons';

function IconButton({ iconName, ...props }: { 
  iconName: IconName; 
  [key: string]: any; 
}) {
  const IconComponent = SaturniaIcons[iconName];
  
  return (
    <button {...props}>
      <IconComponent size={20} />
    </button>
  );
}

// Uso
<IconButton iconName="AddPlusLight" onClick={() => console.log('clicked')} />

📁 Categorias Disponíveis

• Arrow: 84 ícones
• Media: 40 ícones
• Menu: 16 ícones
• Navigation: 35 ícones
• Shapes: 12 ícones
• System: 76 ícones
• User: 27 ícones
• Warning: 36 ícones
• Brands: 186 ícones
• Calendar: 28 ícones
• Communication: 51 ícones
• Edit: 105 ícones
• Environment: 116 ícones
• File: 73 ícones
• Finances: 143 ícones
• Interface: 141 ícones

🎨 Variações Disponíveis

• Light: 589 ícones
• Mono: 82 ícones
• Bold: 394 ícones
• Colored: 104 ícones

🔧 Props Disponíveis

Todos os ícones aceitam as seguintes props:

interface IconProps {
  size?: number | string;        // Tamanho do ícone
  color?: string;                // Cor do ícone
  className?: string;            // Classe CSS
  style?: React.CSSProperties;   // Estilos inline
  // ... todas as props padrão do SVG
}

📦 Build e Deploy

# Instalar dependências
npm install

# Build para produção
npm run build

# Testes
npm test

# Lint
npm run lint

🤝 Contribuindo

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

🏢 Sobre

Desenvolvido com ❤️ pela Saturnia Tecnologia

Nota: Esta documentação é gerada automaticamente pelo sistema de build da Saturnia.