Ajuda para substituir um ícone

Estou tentando substituir o ícone de bars para abrir/fechar a barra lateral seguindo estas instruções Replace Discourse's default SVG icons with custom icons in a theme, mas não estou tendo muito sucesso.

Criei uma spritesheet com o ícone da barra lateral que quero usar (desfocado, pois é um ícone pro do fontawesome)

Criei um componente e fiz o upload da spritesheet:

E usei este código (só quero a mudança no desktop)

Mas simplesmente não aparece nenhum ícone:

Alguma ideia? Tenho certeza de que estou perdendo algo pequeno e estúpido! Obrigado!

você tentou com o nome do arquivo do asset em minúsculas (por exemplo: npn_spritesheet.svg)?
porque, caso contrário, parece que deve funcionar (consigo fazer isso facilmente com um ícone v5, mas não tenho nenhum v6 pro).

a menos que seja simplesmente por causa disto:

O que você vê quando inspeciona o elemento <span class="header-sidebar-toggle"> à esquerda do logotipo do seu site?

Por exemplo, você não tem um viewbox declarado na tag symbol, o ícone pode simplesmente estar fora de vista.

2 curtidas

Estranhamente, quando eu excluo esse asset e faço o upload novamente com uma versão em minúsculas (eu até o renomeei para npnassets.svg, ainda vejo o nome do arquivo antigo…

Como eu baixei o svg e o inseri manualmente na spritesheet, não acho que isso deva ser um problema, é por isso que segui esse caminho, já que o v5 não tem um ícone de barra lateral.

2 curtidas

..você precisaria expandir o elemento svg e todos os elementos aninhados para ver o código do ícone.

1 curtida

Então o código do ícone da spritesheet não está sendo renderizado. Você ainda poderia tentar mudar o id do ícone para um nome sem hífen, como npnsidebar. às vezes, encontro problemas com nomes de variáveis em temas para os quais não consigo descobrir a causa real, mas fazer um pequeno ajuste o corrige.

Caso contrário, você poderia compartilhar o arquivo SVG. Vi que você pixelou o código real, mas ele será publicamente acessível de qualquer maneira quando você o usar em seu site ativo (editar: ah, não vi que é do plano pro…)

1 curtida

Obrigado, tentei mudar o nome para npnsidebar na spritesheet e no código, o que me permitiu substituir a spritesheet corretamente também. Mas, infelizmente, não ajudou. Posso enviar a spritesheet e o svg por DM para você verificar meu trabalho. Obrigado pela sua ajuda!

2 curtidas

Se você substituir o ícone bars por outro ícone do conjunto padrão, a substituição funciona? Diga, substitua-o por cog ou comment.

Se isso funcionar, o problema está no seu código de símbolo SVG personalizado. Provavelmente ele precisa de um atributo viewBox. Como este ícone personalizado (para o componente temático de gifs):

5 curtidas

Eu o substituí dessa forma por um padrão (o ícone de código) ontem e funcionou, então acho que é realmente o atributo viewBox como você diz.

4 curtidas

Era isso, obrigado como sempre, Penar!

4 curtidas

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.