Você pode substituir os ícones SVG padrão do Discourse individualmente ou todos de uma vez por seus próprios SVGs personalizados e substituí-los dentro de um tema ou componente de tema.
Passo 1 - Criar uma Spritesheet SVG
Para começar, você deve criar uma Spritesheet SVG. Ela pode conter qualquer coisa, desde um único ícone SVG personalizado adicional até um conjunto de substituição completo com centenas.
A spritesheet deve ser salva como um arquivo SVG. Em princípio, você aninha o conteúdo da tag <svg> do arquivo de ícone SVG original em tags <symbol> e atribui a elas um identificador agradável.
<?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 quaisquer atributos (ou seja, 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 símbolo na spritesheet. Provavelmente será útil para sua sanidade prefixar seus IDs com o nome do seu tema, como
my-theme-icon. -
Para que a cor do ícone seja dinâmica como os ícones existentes, defina o
fillcomocurrentColorem vez de uma cor codificada (como #333) -
Para dimensionar ou centralizar corretamente seu ícone, utilize um atributo
viewBoxna tag<symbol>. Consulte How to Scale SVG | CSS-Tricks para mais informações. -
Fique atento a colisões de estilo dentro de seus SVGs. Por exemplo, SVGs geralmente terão um estilo embutido como
.st0{fill:#FF0000;}definido. Se você tiver vários SVGs usando as mesmas classes, isso pode causar problemas (para corrigir esses problemas, edite as classes para serem exclusivas de cada ícone). -
Se você tiver muitos ícones, existem 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>
Passo 2 - Adicionar a spritesheet ao seu tema
Depois que sua spritesheet for criada, você precisa adicionar o arquivo SVG ao seu componente/tema. Isso é fácil através da interface do usuário, ou você pode codificá-lo em um componente/tema.
Uma vez carregado em qualquer componente/tema instalado, ele fica disponível em toda a sua instância usando o ID na tag
<symbol>.
Via a Interface do Usuário
Vá para a seção Uploads das configurações do tema/componente e adicione seu arquivo de sprite com um nome de variável SCSS de icons-sprite:
Codificar em um Tema / Componente
Adicione o arquivo da 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 isto:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Passo 3 (opcional) - Substituir ícones padrão
Agora que sua spritesheet está definida, 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 um ID de um de 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.
