Personalizar ícone sem substituição global

Funcionalidade
1

Olá, gostaria de perguntar sobre a possibilidade de permitir a personalização de ícones que não façam uma substituição global de ícones. Por exemplo, se eu quisesse mudar o ícone de mais + para um ícone de avião de papel apenas para enviar uma mensagem, eu acabaria substituindo todos os ícones de + em todo o site, a menos que eu tenha perdido essa opção na documentação. Eu realmente gostaria da capacidade de identificar um ID/Classe ou item onde eu pudesse substituir o ícone especificamente.

1 curtida
2

Com CSS você pode segmentar e substituir uma instância específica de um ícone.

Este tópico parece ter algumas informações

3

Já tentei isso e não funciona, pelo menos não com a instalação recente do Discourse que tenho. Em segundo lugar, isso não parece substituir uma única instância de ícone, pois substituirá todos os ícones com base no seletor de ícone especificado.

Atualmente, é assim que eu substituo o ícone de ‘novo tópico’

  api.onPageChange(() => {
    const button = document.querySelector("#create-topic");

    if (button) {
      const oldSvg = button.querySelector("svg");
      if (oldSvg) {
        oldSvg.remove();
      }
      const ns = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(ns, "svg");
      svg.setAttribute("xmlns", ns);
      svg.setAttribute("viewBox", "10 10 30 30");
      svg.setAttribute("width", "28");
      svg.setAttribute("height", "28");
      svg.setAttribute("class", "svg-icon custom-icon");
      svg.innerHTML = `
        (código do ícone svg aqui)
      `;

      button.insertBefore(svg, button.firstChild);
    }
  });

Embora eu pudesse replicar isso para as áreas que desejo, não funciona tão bem nos ícones do composer, o que tive que fazer uma substituição global de ícones, como o link que você compartilhou menciona.

4

No momento não é possível, exceto em alguns casos especiais.

Este tópico é uma solicitação duplicada, então vou fechar este em favor de Change single instance of icon, que também tem um exemplo de adicionar um ícone via CSS.

Sinta-se à vontade para votar naquele e adicionar mais detalhes lá, se necessário!

3 curtidas
5

Duplicado de Change single instance of icon