Ph
Componente base que renderiza qualquer glifo do Phosphor.
import { Ph } from '@onblide/ui';
Demo interativa
Ajuste as propriedades e veja o componente e o código mudarem juntos.
weight
Propriedades
| Prop↕ | Tipo | Padrão | Descrição |
|---|---|---|---|
n * | string | — | Nome do ícone do Phosphor, sem o prefixo "ph-" (ex.: "check" renderiza o glifo ph-check). |
size | number | 18 | Tamanho do ícone em px. |
c | string | — | Cor do ícone; por padrão herda a cor do texto (`currentColor`). |
weight | "thin" | "light" | "regular" | "bold" | "fill" | "duotone" | regular | Peso do ícone; veja as regras de uso de cada peso em Fundações › Iconografia. |
style | CSSProperties | — | Estilos inline adicionais aplicados ao ícone. |
Exemplos
Ícones
Carregando…
const row = { display: 'flex', gap: 16, padding: 16, alignItems: 'center' }; const Icones = () => ( <div style={row}> <Ph n="house" size={24} /> <Ph n="bell" size={24} /> <Ph n="calendar" size={24} /> <Ph n="chat" size={24} /> <Ph n="gear" size={24} /> </div> ); render(<Icones />);
Tamanhos e cores
Carregando…
const row = { display: 'flex', gap: 16, padding: 16, alignItems: 'center' }; const TamanhosECores = () => ( <div style={row}> <Ph n="star" size={16} /> <Ph n="star" size={24} c="var(--ob-warning)" /> <Ph n="heart" size={32} c="var(--ob-danger)" /> <Ph n="check" size={40} c="var(--ob-success)" /> </div> ); render(<TamanhosECores />);