Exemplos — Docs

Ícone em um botão

O mono herda currentColor, então acompanha a cor do botão:

tsx

import { Github } from 'glifo';

<button className="inline-flex items-center gap-2 rounded-lg bg-black px-4 py-2 text-white">
  <Github size={18} /> Entrar com GitHub
</button>

Lista de marcas a partir do registry

tsx

import { registry } from 'glifo';

const brands = Object.values(registry)
  .filter((i) => !!i.hex)
  .slice(0, 20);

<ul>
  {brands.map((Icon) => (
    <li key={Icon.slug} className="flex items-center gap-2">
      <Icon.Color size={20} />
      {Icon.iconTitle}
    </li>
  ))}
</ul>

Tags de modelos de IA

tsx

import { OpenAI, Anthropic, Google } from 'glifo';

<div className="flex gap-2">
  <OpenAI.Tag />
  <Anthropic.Tag />
  <Google.Tag />
</div>

Ícone dinâmico por dado

tsx

import { Glifo } from 'glifo';

function Channel({ provider }: { provider: string }) {
  return <Glifo name={provider} variant="color" size={24} />;
}