Ícones

Todos os ícones do pacote @medway-ui/icons. A lista é gerada a partir dos SVGs do repositório, então um ícone novo aparece aqui assim que entra na main, um pouco antes de ser publicado no npm. Enquanto isso, ele leva a marca Não publicado e chega na próxima versão do pacote. Se o import de um ícone sem a marca falhar, atualize o @medway-ui/icons no seu projeto.

Galeria

Busque pelo nome e clique em um ícone para copiar o import.

Instalação

yarn add @medway-ui/icons

Uso

Cada ícone é um componente React. Por padrão, ele herda a cor do texto (currentColor) e tem 24 px.

import { Bell } from "@medway-ui/icons";
 
export default function Page() {
  return <Bell size={20} strokeWidth={1.5} className="text-primary-foreground" />;
}

API

Os demais atributos de svg são repassados ao elemento.

Acessibilidade

O ícone é decorativo por padrão (aria-hidden="true"): o leitor de tela pula, e quem dá nome é o botão ou o texto em volta. Quando o ícone sozinho tem significado, passe aria-label (ou aria-labelledby) e ele vira uma imagem com esse nome (role="img").

import { Warning } from "@medway-ui/icons";
 
export default function Page() {
  return <Warning aria-label="Atenção" />;
}

React Native

No app, importe de @medway-ui/icons/native. Os ícones nativos são desenhados com o react-native-svg e têm outra API: não há size nem className (o NativeWind não aplica classes no Svg), e a cor vem da prop color, que é obrigatória. Sem ela, o traço fica sem cor.

Para usar uma cor do tema, prefira o ThemedIcon do @medway-ui/native: ele recebe o ícone e o token de cor, sem o prefixo --color-, e acompanha o tema claro e escuro.

import { Bell } from "@medway-ui/icons/native";
import { ThemedIcon } from "@medway-ui/native";
 
export function Screen() {
  return <ThemedIcon icon={Bell} size={20} colorToken="primary-foreground" />;
}

API (React Native)

As demais props do Svg do react-native-svg (style, testID, opacity...) são repassadas a ele. O ícone é decorativo por padrão e fica escondido do leitor de tela; com accessibilityLabel (ou aria-label), ele vira uma imagem com esse nome.

O ThemedIcon recebe: