Você pode substituir os ícones SVG padrão do Discourse individualmente ou em conjunto pelos seus próprios SVGs personalizados e sobrescrevê-los dentro de um tema ou componente de tema.
Etapa 1 - Criar uma Spritesheet SVG
Para começar, você deve criar uma Spritesheet SVG. Ela pode conter desde um único ícone SVG personalizado adicional até um conjunto completo de substituição com centenas de ícones.
A spritesheet deve ser salva como um arquivo SVG. Em princípio, você está aninhando o conteúdo da tag <svg> do arquivo de ícone SVG original em tags <symbol> e atribuindo a eles um identificador adequado.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="my-theme-icon-1">
<!--
Código dentro da tag <svg> do arquivo de ícone SVG de origem
isso é tipicamente tudo entre as tags <svg>
(mas não a tag SVG em si, que é substituída por <symbol> acima)
Você pode transferir qualquer atributo (i.e. ViewBox="0 0 0 0") para a tag <symbol>
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- Código SVG aqui. Adicione mais blocos <symbol> conforme necessário.
-->
</symbol>
</svg>
-
Certifique-se de adicionar um ID personalizado a cada symbol na spritesheet. Provavelmente é útil para a sua sanidade prefixar seus IDs com o nome do seu tema
my-theme-icon. -
Para que a cor do ícone seja dinâmica como nos ícones existentes, defina o fill como
currentColorem vez de uma cor fixa (como #333) -
Para dimensionar ou centralizar corretamente o seu ícone, utilize um atributo
viewBoxna tag<symbol>. Veja How to Scale SVG | CSS-Tricks para mais informações. -
Fique atento a colisões de estilo dentro dos seus SVGs. Por exemplo, SVGs frequentemente terão um estilo inline como
.st0{fill:#FF0000;}definido. Se você tiver múltiplos SVGs usando as mesmas classes, isso pode causar problemas (para corrigir esses problemas, edite as classes para que sejam únicas para cada ícone). -
Se você tiver muitos ícones, há maneiras de automatizar isso. https://www.npmjs.com/package/svg-sprite-generator é uma ferramenta simples de linha de comando para combinar SVGs em uma spritesheet.
Exemplo - spritesheet de ícone personalizado único
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bat-icon" viewBox="6 6 36 36">
<path
fill="currentColor"
d="M24,18.2c0.7,0,0.9,0.2,0.9,0.2l0.4-1.7c0,0,0.4,1.5,0.4,2.8c0.2,1.1,2.2,0.4,3.9,0C31.4,19.1,32,16,32,16h16c0,0-9.4,3.5-7,10c0,0-14.8-2-17,7l0,0c-2.2-9-17-7-17-7c2.4-6.5-7-10-7-10h16c0,0,0.6,3.1,2.3,3.5c1.7,0.4,3.9,1.1,3.9,0c0.2-1.1,0.4-2.8,0.4-2.8l0.4,1.7C23.1,18.4,23.4,18.2,24,18.2L24,18.2L24,18.2z"
/>
</symbol>
</svg>
Etapa 2 - Adicionar a spritesheet ao seu tema
Uma vez que sua spritesheet esteja pronta, você precisa adicionar o arquivo SVG ao seu componente/tema. Isso é fácil pela interface, ou você pode codificá-lo diretamente em um componente/tema.
Uma vez que seja enviado para qualquer componente/tema instalado, ele estará disponível em toda a sua instância usando o ID na tag
<symbol>.
Via interface
Vá para a seção Uploads das configurações do tema/componente e adicione seu arquivo sprite com um nome de variável SCSS icons-sprite:
Codificar diretamente em um Tema / Componente
Adicione o arquivo de spritesheet à pasta /assets do Tema. Em seguida, atualize seu arquivo assets.json na pasta raiz.
Para um sprite SVG chamado my-icons.svg, seu about.json deve incluir isso:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Etapa 3 (opcional) - Sobrescrever ícones padrão
Agora que sua spritesheet está configurada, você pode instruir o Discourse a substituir ícones. É assim que você faz isso a partir de um api-initializer:
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.replaceIcon("bars", "my-theme-icon-bars");
api.replaceIcon("link", "my-theme-icon-link");
// etc.
});
O primeiro ID, bars, é o ID do ícone padrão no Discourse e o segundo é o ID do seu ícone de substituição. A maneira mais fácil de encontrar o ID de um dos nossos ícones é inspecionar o ícone no seu navegador.
Aqui, o nome do ícone segue o prefixo d-icon-. Então, neste exemplo, é d-unliked
A maioria dos nossos ícones segue os nomes de ícones do https://fontawesome.com/, mas há exceções (é por isso que verificar o ID no seu inspetor é o método mais confiável). Você pode ver todas as exceções no bloco const REPLACEMENTS aqui no github.
É isso. Agora você pode estilizar o Discourse com seus próprios ícones personalizados!
Este documento é controlado por versão - sugira alterações no github.
