Pular para o conteúdo
PrivateLab Design System

StoreIcon

Ícone de loja em pixel para marcas que ainda não enviaram logo.

O StoreIcon desenha a loja que ainda não tem logo: um motivo de loja em pixel (vitrine, sacola, caixa e outros) em branco sobre um fundo azul com dither. Aparece no campo Logo da Marca, no contexto do shell e no onboarding. O ícone nunca é guardado: sai do nome da marca e some quando o logo é enviado.

import { StoreIcon } from "@rastreio-x/ui";

Padrão

Motivos

Onze motivos 9x9. Sem motif, o nome escolhe o motivo; passe motif para forçar um (vitrine e testes).

Cor da marca

Com color (#RRGGBB), o fundo segue o matiz da cor da marca. Sem ela, o fundo fica sempre na faixa de azuis, para não destoar da marca do PrivateLab no topo do trilho.

Animado

animated acende os pixels em cascata ao aparecer e quando a semente muda.

Anatomia

O StoreIcon é um SVG de pixels com o fundo em dither, um brilho de canto e o motivo por cima, recortados por um retângulo arredondado.

Propriedades

Animações

Com animated, os pixels acendem em cascata (cerca de 22 ms entre pixels) e o fundo troca de cor em 350 ms quando a semente muda. O componente respeita prefers-reduced-motion: com movimento reduzido, a troca é imediata e a cascata não toca.

Acessibilidade

  • Decorativo e aria-hidden: o nome da loja vem sempre em texto ao lado.
  • O motivo é branco sobre azul de contraste alto; a auditoria de contraste das lojas sem logo roda em scripts/brand/audit-generated-icons.ts.
  • Não carrega estado.

Boas práticas

Faça

Mostrar o ícone gerado só enquanto a loja não tem logo, ao lado do nome da marca.

Evite

Persistir o desenho ou usá-lo como logo de transportadora.
  • Sempre azul, com dither: lojas se distinguem pelo motivo e pela variante de azul.
  • Use animated só quando o ícone aparece por ação da pessoa (digitar o nome da loja).
  • A Página pública desenha o mesmo ícone a partir do núcleo, sem importar a fachada.

Relacionados