Ajustar Ícone para Seguir a Cor da Variável Principal no Elementor (currentColor) - Bruno Devx - BR Criativus

post #4654

Ajustar Ícone para Seguir a Cor da Variável Principal no Elementor (currentColor)

Publicado em: 07/03/2024 / Atualizado em: 07/03/2024

Categorias: BlogElementorSVGWordpress

Para que você consiga exportar um ícone do figma e ele tenha a mesma cor global dos elementos como fonte e ícones, definida por você no código CSS ou no Elementor, você precisa que este ícone esteja configurado com o atributo “fill” em “currentColor”.

Com isso, o seu ícone vai seguir sempre a cor principal definida nos elementos acima do seu Box.

1 – O primeiro passo é você importar o seu ícone para dentro do figma e selecionando ele com o botão direito, você vai clicar na opção “Outline stroke”.

img 1
img 1

2 – Depois disso, você pode utilizar um plugin dentro do Figma que se chama “SVG Export”, abrindo a janela deste plugin, você vai selecionar o ícone, e depois vai selecionar a opção “monochrome”.

img 2
img 2

3 – Feito isso, Provavelmente o seu ícone ficou na cor preta, agora você pode clicar neste botão para fazer o download.

img 3
img 3

Pronto, agora o seu ícone está preparado para ser importado para o Elementor ou qualquer outro editor de código.

img 4
img 4

Se você abrir o ícone no navegador, e selecionar a opção inspecionar código, verá que dentro da tag svg você tem o atributo “fill” com o valor “currentColor” definido.

Publicações recomendadas:



Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=4654

ID de Referência: 4654

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato