Como substituir um ícone SVG existente por um personalizado?

Dev
1

Então, eu postei essa pergunta em um tópico sobre o componente que altera o ícone de Curtir para um polegar para cima. Desculpe reviver esse assunto novamente, mas estou totalmente confuso.

O que eu gostaria de fazer é usar um ícone de Curtir personalizado daqui - Font Awesome, com a versão em contorno sendo o ícone de “Não curtido”. Isso é possível? Como é um ícone Pro, eu teria que baixá-lo, criar o meu próprio e adicioná-lo como um ícone ou emoji personalizado para, em seguida, aplicá-lo ao componente de Curtir? Também não tenho certeza de como fazer isso.

Tenho o componente “Alterar Ícone de Curtir” instalado e o testei em um tema não utilizado, e ele funciona conforme o esperado.

Estou supondo que, para ter seu próprio ícone personalizado, você não possa usar o componente ao mesmo tempo, pois parece que o polegar para cima sobrescreve tudo. Então, removi-o e adicionei este código à área do Cabeçalho no HTML personalizado desse tema:

api.replaceIcon('d-liked', 'fa-pig');
api.replaceIcon('d-unliked', 'fal-pig');
api.replaceIcon('notification.liked', 'fa-pig');
api.replaceIcon('notification.liked_2', 'fa-pig');
api.replaceIcon('notification.liked_many', 'fa-pig');
api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
api.replaceIcon('d-unliked', 'fal-pig');
api.replaceIcon('notification.liked', 'fa-pig');
api.replaceIcon('notification.liked_2', 'fa-pig');
api.replaceIcon('notification.liked_many', 'fa-pig');
api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
api.replaceIcon('heart', 'fa-pig');

No subconjunto de ícones SVG, adicionei fa-pig e fal-pig, mas ao visualizar, o ícone de Curtir aparece em branco. Acredito que seja porque não tenho o ícone de Porco realmente instalado. Então, tentei o ícone de cofrinho, que deveria ser gratuito, e adicionei-o ao subconjunto de ícones; novamente, o ícone de Curtir ficou em branco.

Obviamente, estou fazendo algo errado. Tentei fazer upload de um Ativo para este tema de teste com o nome icons-sprite como um SVG; ele permitiu o upload de um, mas não consigo nomear dois uploads diferentes com o mesmo nome de variável icons-sprite. De qualquer forma, continua em branco, mesmo com apenas um upload.

Trabalho em TI, mas sou um grande iniciante em programação de qualquer uma dessas coisas avançadas de backend do Discourse.

Qualquer ajuda seria apreciada, obrigado.

2

Não sou especialista nisso…

Talvez dê uma olhada em Discourse FontAwesome Pro

3

O ícone piggy-bank deve funcionar, mas você precisa adicioná-lo sem nenhum prefixo na configuração do site do subconjunto de ícones SVG e nas funções de substituição em JS.

Os ícones Pro não estão incluídos no núcleo, então para o ícone pig, exclusivo da versão Pro, você pode usar o plugin sugerido pelo Jay acima ou criar sua própria sprite. Certifique-se de examinar o arquivo de sprite SVG de exemplo vinculado na OP; a sprite precisa de uma estrutura específica com símbolos e IDs (e é o ID que você usa nas chamadas da API em JS).

4

Então, tentei novamente e adicionei o ícone ‘piggy-bank’ ao subconjunto de ícones SVG. Adicionei o JS no cabeçalho novamente e referenciei ‘Piggy-Bank’, e finalmente funcionou direito! Valeu! Agora, o único problema com esse ícone específico é que tanto as postagens curtidas quanto as não curtidas ficam exatamente iguais; não há uma versão com contorno para as não curtidas. Ao acessar o site do Font Awesome novamente, notei que as versões com contorno do ícone são PRO. Isso acaba com essa ideia. Não vou gastar cem dólares por ano por apenas 1 ícone; somos uma organização sem fins lucrativos e não cobramos pela adesão.

Então, acho que estou de volta a criar meu próprio ícone. Vou verificar aquelas instruções novamente.

5

Você adicionou ambos? (Eu não fiz o que você está fazendo, então isso pode não ajudar). Existe um componente de tema que cria um “joinha”, então você pode verificá-lo para garantir que está adicionando tudo o que precisa para alterar a ação de curtir. (ou talvez aquele ícone simplesmente não funcione).

6

Ok, então tentei algumas coisas para criar o meu próprio. Infelizmente, o link para ver um exemplo de como o arquivo SVG Sprites deve ser formatado no OP é apenas uma página em branco, não carrega. Então, eu improvisar. Criei ambos os meus SVGs no Illustrator, exportei e depois os joguei no Chrome para “Inspeccionar elemento” e obter as informações do arquivo Path.

Estou usando um Mac, então abri o TextEdit e copie as informações que acredito que deveriam estar no arquivo Sprite. Em seguida, alterei a extensão para .svg. Carreguei no tema e adicionei o código JS no Cabeçalho.

Novamente, não tenho certeza se algo disso está correto e tenho quase certeza de que não está, já que, ao visualizar o tema do site, ele trava completamente. Recebo o erro “Ooops - O software que alimenta este fórum de discussões encontrou um problema inesperado.” Após remover o arquivo SVG dos ícones que foi carregado e aguardar um pouco, o site carrega corretamente novamente.

Abaixo estão as informações do SVG no arquivo e o código JSON.

Obrigado!

Aqui está o arquivo Sprite no Google Drive, caso alguém queira dar uma olhada - Drive

E o código -

Screen Shot 2021-03-19 at 4.32.51 PM
Screen Shot 2021-03-19 at 4.32.51 PM499×408 30.8 KB

7

Você não deve adicionar icons-sprite duas vezes.

Pode postar os caminhos SVG em um bloco de código? Acho que você está tendo problemas ao colocar os ícones em um sprite; posso ajudar com isso.

8

Obrigado! É isso que você está procurando?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ViewBox e Polygon retirados de "SVGpig.svg" -->
  <symbol id="ids-SVGpig" width="616px" height="425px" viewBox="0 0 616 425">
    <path xmlns="http://www.w3.org/2000/svg" fill="#060709" d="M184.131,400.155c2.827,0.205,3.614-5.244,7.953-7.232c4.652-7.228,0,0,7.627-10.233    c-0.112,0.04,6.764-6.983,6.651-6.942c6.519-17.718,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456    c2.529-0.931,3.49,2.748,4.203,4.525c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-6.405,14.642-5.161,22.4    c4.807-0.332,19.038,0.231,23.851,0.298c2.355-7.332,1.213-5.049,4.524-12.042c0.322-0.68,4.927-10.54,5.377-10.93    c4.667-11.476,9.501-22.896,14.743-34.119c5.729,11.479,7.265,24.374,9.339,36.882c-0.092,0.01-0.183,0.021-0.275,0.03    c3.219,10.044-1.754,20.419-0.559,30.879c8.474,0.214,23.744-0.615,32.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C62.018,74.314,54.998,90.515,40,97.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,18.703-53.914,20.5-60.062    c0.033,6.355-15.454,62.01-17,68 M77.21,126.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C86.532,113.189,82.366,121.266,77.21,126.644z"/>
  </symbol>

  <!-- ViewBox e Polygon retirados de "SVGpigout.svg" -->
  <symbol id="ids-SVGpigout" width="621px" height="430px" viewBox="0 0 621 430">
    <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#060709" stroke-width="8" stroke-miterlimit="10.43" d="M167.5,399.499L194,405    c2.827,0.205,1.084-10.077,1.084-10.077s0,0,7.627-10.233c-0.112,0.04,6.651-6.942,6.651-6.942    c8.885-18.201,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456c2.529-0.931,3.49,2.748,4.203,4.525    c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-5.405,17.642-4.161,25.4c4.807-0.332,17.453-2.001,22.266-1.935    c2.355-7.332,1.798-5.816,5.109-12.81c0.322-0.68,4.927-10.54,5.377-10.93c4.667-11.476,14.743-34.119,14.743-34.119l9.339,36.882    l-0.275,0.03c0,0,0.246,20.419,1.441,30.879c8.474,0.214,21.744-0.615,30.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C65.018,76.314,57.998,92.515,43,99.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,12.203-34.414,14-40.562    c0.033,6.355-14,46.666-7,49.999 M80.21,128.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C89.532,115.189,85.366,123.266,80.21,128.644z"/>
  </symbol>


</svg>
9

Discourse Gifs inclui um ícone GIF personalizado que você pode usar como exemplo:

10

Ok, tente usar este: Dropbox

Adicionei apenas a chamada replaceIcon para d-liked. Você precisará editar o componente na sua instância e adicionar as outras linhas. Certifique-se de usar os IDs do arquivo SVG; atualmente, eles são simplesmente SVGpig e SVGpigout.

11

Maravilhoso! Obrigado, funcionou. Consegui colocar tudo no ar. Minha comunidade agradece. Muito obrigado!!

Screen Shot 2021-03-25 at 12.29.27 PM
Screen Shot 2021-03-25 at 12.29.27 PM304×121 5.13 KB