Início rápido — Docs

1. Import nomeado (recomendado)

O jeito mais comum e mais leve. Importe a marca pelo nome — o base é a versão mono (currentColor), então ele herda a cor do texto:

tsx

import { Github } from 'glifo';

<Github />            {/* 24px, currentColor */}
<Github size={32} />
<Github className="text-violet-500" />

Cada marca traz variantes como propriedades:

tsx

import { Discord } from 'glifo';

<Discord.Color size={32} />   {/* cor oficial */}
<Discord.Avatar size={40} />  {/* com fundo */}
<Discord.Tag />               {/* pill ícone + nome */}

2. Dinâmico por string

Quando o ícone só é conhecido em runtime (ex: vem de uma API), use <Glifo>:

tsx

import { Glifo } from 'glifo';

<Glifo name="whatsapp" variant="color" size={28} />

Veja Ícone dinâmico para a nota de bundle.

3. Registry

Precisa listar ou pesquisar marcas? O registry é um objeto slug → ícone:

tsx

import { registry } from 'glifo';

const github = registry['github'];
github.iconTitle; // "GitHub"
github.hex;       // "181717"