Quando o nome da marca vem de dados (API, banco, config), use <Glifo> e passe o name:
import { Glifo } from 'glifo';
<Glifo name="whatsapp" />
<Glifo name="openai" variant="color" size={28} />Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
name |
string |
— | slug da marca (ex: "github") |
variant |
'mono' | 'color' | 'avatar' | 'combine' | 'text' | 'tag' |
'mono' |
qual variante renderizar |
size |
number | string |
24 |
largura/altura |
Se o name não existir no registry, o componente renderiza null (não quebra).
Nota de bundle
<Glifo> referencia o registry, que aponta para todos os ícones. Se você usa o dinâmico, o bundler pode incluir tudo. Para manter o bundle enxuto, importe glifo dinamicamente e deixe virar um chunk separado:
const { Glifo } = await import('glifo');Se você conhece o ícone em tempo de compilação, prefira o import nomeado.