@clickcannabis/icones-lib

Biblioteca de ícones SVG em React para Click Cannabis com suporte completo a TypeScript.

Instalação

npm install @clickcannabis/icones-lib

Uso

Importação por categoria (Recomendado)

Para evitar conflitos de nomes e reduzir o tamanho do bundle, use importações por categoria:

// Importar apenas ícones de email
import {
  SvgMailEmailLetter,
  SvgTrashDeleteBin,
} from "@clickcannabis/icones-lib/emails";

// Importar apenas ícones de interface essencial
import {
  SvgCheckmark,
  SvgClose,
} from "@clickcannabis/icones-lib/interface-essential";

// Importar apenas ícones de pagamentos e finanças
import {
  SvgCreditCard,
  SvgMoney,
} from "@clickcannabis/icones-lib/payments-finance";

Importação com namespaces (Para todos os ícones)

Se precisar de todos os ícones, use namespaces para evitar conflitos:

import {
  emails,
  interfaceEssential,
  paymentsFinance,
} from "@clickcannabis/icones-lib";

function App() {
  return (
    <div>
      <emails.SvgMailEmailLetter width={24} height={24} />
      <interfaceEssential.SvgCheckmark width={24} height={24} />
      <paymentsFinance.SvgCreditCard width={24} height={24} />
    </div>
  );
}

Categorias Disponíveis

• emails - Ícones relacionados a email e comunicação
• interface-essential - Ícones essenciais de interface
• weather-climate - Ícones de clima e tempo
• video-movies - Ícones de vídeo e filmes
• type-paragraph-character - Ícones de texto e caracteres
• travel - Ícones de viagem
• transportation - Ícones de transporte
• technology - Ícones de tecnologia
• technology-space - Ícones de tecnologia espacial
• table-edit - Ícones de edição de tabelas
• support-help-question - Ícones de suporte e ajuda
• sport - Ícones de esportes
• socialmediasrewards - Ícones de redes sociais e recompensas
• social-media - Ícones de redes sociais
• smileys - Ícones de emojis e expressões
• smart-home - Ícones de casa inteligente
• shopping-ecommerce - Ícones de compras e e-commerce
• servers-databases - Ícones de servidores e bancos de dados
• seo - Ícones de SEO
• science - Ícones de ciência
• school-learning - Ícones de escola e aprendizado
• romance-wedding - Ícones de romance e casamento
• restaurant-cafe - Ícones de restaurantes e cafés
• real-estate - Ícones de imóveis
• protection-security - Ícones de proteção e segurança
• programing-data - Ícones de programação e dados
• photo-edit - Ícones de edição de fotos
• phones - Ícones de telefones
• pets-animals - Ícones de pets e animais
• payments-finance - Ícones de pagamentos e finanças
• office-work - Ícones de escritório e trabalho
• navigation-maps - Ícones de navegação e mapas
• music-audio - Ícones de música e áudio
• money - Ícones de dinheiro
• mobile-telephone - Ícones de telefone móvel
• mobile-devices - Ícones de dispositivos móveis
• messages-chat - Ícones de mensagens e chat
• legal-law - Ícones de legal e lei
• landmarks-places - Ícones de marcos e lugares
• kitchen-cooking - Ícones de cozinha e culinária
• internet-network - Ícones de internet e rede
• hotels - Ícones de hotéis
• holidays - Ícones de feriados
• health-medicine - Ícones de saúde e medicina
• hardware-components - Ícones de componentes de hardware
• hands - Ícones de mãos
• geometric-abstract - Ícones geométricos e abstratos
• furniture - Ícones de móveis
• fruits-vegetables - Ícones de frutas e vegetais
• food - Ícones de comida
• folders - Ícones de pastas
• files - Ícones de arquivos
• fast-food-drink - Ícones de fast food e bebidas
• entertainment-casino - Ícones de entretenimento e cassino
• energy-renewable - Ícones de energia renovável
• ecology-recycling - Ícones de ecologia e reciclagem
• design-tools - Ícones de ferramentas de design
• delivery - Ícones de entrega
• cursor-select-hand - Ícones de cursor e seleção
• crypto-currency - Ícones de criptomoedas
• copy-right - Ícones de direitos autorais
• content-edit - Ícones de edição de conteúdo
• construction-tools - Ícones de ferramentas de construção
• computers-devices-electronics - Ícones de computadores e eletrônicos
• clothes-sewing - Ícones de roupas e costura
• clothes-accessories - Ícones de roupas e acessórios
• cleaning-housekeeping - Ícones de limpeza e manutenção
• car-service-parts - Ícones de serviço de carro e peças
• business-products - Ícones de produtos de negócio
• building-construction - Ícones de construção de edifícios
• beauty - Ícones de beleza
• basic-shapes - Ícones de formas básicas
• baby-children-toys - Ícones de bebês, crianças e brinquedos
• astrology - Ícones de astrologia
• arrows-diagrams - Ícones de setas e diagramas
• 3d-shapes - Ícones de formas 3D

Props dos Ícones

Todos os ícones aceitam as props padrão do SVG do React:

interface IconProps extends SVGProps<SVGSVGElement> {
  width?: number | string;
  height?: number | string;
  color?: string;
  className?: string;
  // ... outras props do SVG
}

Exemplos

Ícone com tamanho personalizado

<SvgMailEmailLetter width={32} height={32} />

Ícone com cor personalizada

<SvgMailEmailLetter color="#ff0000" />

Ícone com classe CSS

<SvgMailEmailLetter className="my-icon-class" />

Usando namespaces

import { emails, interfaceEssential } from "@clickcannabis/icones-lib";

function App() {
  return (
    <div>
      <emails.SvgMailEmailLetter width={24} height={24} />
      <interfaceEssential.SvgCheckmark width={24} height={24} />
    </div>
  );
}

Desenvolvimento

Instalação de dependências

npm install

Geração de índices

npm run generate-indexes

Build

npm run build

Desenvolvimento

npm run dev

Licença

MIT