Medway Icons

Biblioteca de ícones React da Medway, pronta para uso em projetos modernos. Todos os ícones são componentes React otimizados, com suporte a tree-shaking e tipagem TypeScript.

🎨 Visualizar todos os ícones

Acesse nosso catálogo interativo para visualizar todos os ícones disponíveis:

📱 Ver catálogo completo →

Instalação

npm install @medway-ui/icons
# ou
yarn add @medway-ui/icons

Uso

Importe qualquer ícone diretamente pelo nome:

import { ArrowLeft, ArrowRight } from "@medway-ui/icons";

function Example() {
  return (
    <div>
      <ArrowLeft size={24} color="red" />
      <ArrowRight size={32} color="#00f" />
    </div>
  );
}

Propriedades dos ícones

Todos os ícones aceitam as props padrão de <svg> do React, além de:

• size: número ou string (tamanho em px ou qualquer unidade CSS)
• color: cor do stroke
• strokeWidth: espessura do traço
• className: classe CSS

Uso no React Native

Importe a partir do caminho nativo:

import { Bell } from "@medway-ui/icons/native";

export function ExampleNative() {
  return <Bell height={24} width={24} color="#111" strokeWidth={1.55} />;
}

Propriedades (React Native)

• height e width: tamanho do ícone (padrão 24)
• color: cor aplicada aos fills/strokes do SVG (obrigatória)
• strokeWidth: espessura do traço do ícone
• Aceita também todas as props de SvgProps do react-native-svg

Observação: é necessário instalar a biblioteca react-native-svg no seu projeto React Native.

Gerando os ícones

Se você precisa atualizar ou adicionar novos ícones:

1. Adicione os arquivos SVG na pasta ./icons.

2. Execute o script de geração:

   yarn generate-icons
   # ou
   npm run generate-icons

3. O script irá converter os SVGs em componentes React e atualizar os exports em src/web/components/icons/index.ts (web). Também serão gerados os componentes React Native em src/native/components/icons e os índices src/native/index.ts e src/native/components/icons/index.ts.

4. Faça o build da lib:

   yarn build
   # ou
   npm run build

Publicando a lib

1. Certifique-se de estar logado no npm:

   npm login

2. Publique:

   yarn release
   # ou
   npm run release

Medway Icons © Medway. MIT License.