A dica deste artigo surgiu em meio a um dos projetos aqui da Glass Cannon. Tínhamos um protótipo no Illustrator e exportamos os elementos para aplicar no WordPress. Porém, na hora dos ajustes, precisávamos mudar a cor dos ícones e o Elementor não permitiu.
Seria necessário exportar novos ícones na cor certa? Vamos conferir!
Se existe a opção de mudar a cor do ícone no widget, é para funcionar, certo? Pois bem! Não funcionou de primeira. No protótipo, os ícones tinham uma cor e, ao exportar o arquivo SVG, essa cor é carregada no código do arquivo, o que não permite que o Elementor a controle.
Veja em um teste, como adicionei um SVG do Linkedin amarelo, mas na tentativa de mudar para vermelho, o ícone não mudou de cor.
Então, ao pesquisar pela solução, vi alguns artigos falando sobre as configurações de exportação de SVG do Illustrator, mas que também não funcionaram. Tentei tirar o preenchimento do vetor, mas também foi sem sucesso.
Os artigos não ajudaram, porém, um dos comentários dizia para não incluir a estilização no arquivo e então a ficha caiu!
“Se o SVG é imagem, mas também é código, vou abri-lo no editor de texto!”
E a solução era mais simples do que imaginei.
Vejam o código desse mesmo arquivo amarelo do Linkedin:
Tem um elemento “style” com o “fill” de HEX no tom amarelo. Basta removê-lo para permitir o Elementor a colorizar o SVG.
Conclusão
Sim, acabei exportando novos ícones para o projeto, no entanto, a cor passou a ser controlada pelo próprio Elementor e se eu precisar trocar a cor desses ícones novamente, não será necessário exportar novos arquivos SVG.
Observação
Este ajuste é indicado para ajeitar detalhes, pois, trabalhar com SVG no código pode ser bastante trabalhoso, como visto no Werewolf e seu código SVG:
Fonte: Flaticon
Extra | Alerta de Segurança
Arquivos SVG são imagens, sim! Mas também são feitos de códigos e podem conter scripts, por essa razão, por padrão, o WordPress não permite o upload de arquivos desse tipo por motivos de segurança.
“Sorry, this file type is not permitted for security reasons.”
No entanto, em artigo anterior (Ícones de Chumbo), deixei uma dica sobre a utilização de ícones próprios em SVG em substituição a biblioteca padrão de ícones no Elementor, então, para não se confrontarem as informações, aqui vai mais uma dica.
Neste caso, ao enviar seu primeiro arquivo SVG pelo Elementor, é exibida a seguinte mensagem de alerta:
Basta clicar em “Enable” para permitir o envio de arquivos SVG, mas, assim como também é recomendado, utilize arquivos SVG de fontes confiáveis ou que você mesmo tenha produzido.