Ícones

icons é um tipo avançado suportado pelo editor, API e Build Kit. Ele substitui o sprite SVG utilizado pela loja inteira, não apenas um símbolo isolado.

Não há aba de schema. Em API e Build Kit, envie { "component_config": {} }. O único arquivo é o Liquid principal.

Referência-base completa para Header

O sprite precisa manter o container #icons e ids estáveis. A referência abaixo contém todos os símbolos usados pelos exemplos de Header: busca, conta, carrinho, menu, fechar e microfone. Inclua também todo símbolo adicional usado pela referência aprovada da loja antes de publicar.

<div id="icons" style="display: none;">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <symbol id="icon-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="2"/><path d="m16 16 4 4" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
    <symbol id="icon-account" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
    <symbol id="icon-cart" viewBox="0 0 24 24"><path d="M3 4h2l2 11h10l2-8H6" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="9" cy="20" r="1"/><circle cx="17" cy="20" r="1"/></symbol>
    <symbol id="icon-hamburger" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
    <symbol id="icon-close" viewBox="0 0 24 24"><path d="m5 5 14 14M19 5 5 19" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
    <symbol id="icon-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3" fill="none" stroke="currentColor" stroke-width="2"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4M8 21h8" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
  </svg>
</div>

Verificação

• Compare o sprite final à referência aprovada da loja e preserve todos os símbolos usados fora do Header.
• Teste busca, conta, carrinho, menu mobile, fechamento, voz, formulários e demais pontos que usam SVG.
• Não publique somente um símbolo novo ou modificado.