SVG para Webflow — Copie e Cole Ícones como Elementos

Por que colar ícones SVG como embeds no Webflow?

Enviar o ícone como imagem funciona, mas as cores do SVG ficam travadas: você não consegue mudá-las no hover, no modo escuro ou por componente. Colocar o código SVG dentro de um Code Embed torna o ícone parte da página, então ele herda o CSS. Com fill="currentColor", o ícone assume a cor da fonte do elemento, e as Interações ou os estados de hover do Webflow podem mudar essa cor.

O que o limpador faz

• Remove a declaração XML, comentários, <metadata> e atributos de editores como Figma, Illustrator, Inkscape e Sketch.
• Substitui as cores fixas de fill/stroke por currentColor (mantém none e referências a gradientes).
• Adiciona um viewBox quando ele não existe e define largura e altura como 100%, para que a div externa controle o tamanho.
• Marca ícones decorativos com aria-hidden="true" ou adiciona role="img" e um rótulo nos ícones com significado.
• Remove scripts e manipuladores de eventos inline por segurança, e minifica o resultado.

Custom Elements vs Code Embed

O Custom Element do Webflow permite criar qualquer tag HTML, incluindo svg, path, g, circle e linearGradient, e definir atributos para ela. Feito assim, o ícone é formado por elementos reais do Designer: você vê cada path no Navigator, adiciona classes a partes individuais, anima com Interações, vincula atributos a campos do CMS e edita valores sem abrir código. Já o Code Embed é um único bloco de HTML: é mais simples, mas funciona como uma caixa-preta no Designer.

Como funciona o “Copiar para o Webflow”

Quando você copia elementos dentro do Designer do Webflow, o Webflow coloca na área de transferência uma descrição JSON deles. Esta ferramenta monta o mesmo tipo de dado a partir do seu SVG: um Custom Element por tag, com todos os atributos e com o tamanho escolhido definido no svg raiz (ou em uma classe opcional). Assim, a colagem cria elementos nativos. O Webflow não documenta oficialmente esse formato da área de transferência. Por isso, se uma atualização futura mudar o formato, a ferramenta tem um recurso de calibração: copie qualquer Custom Element do seu Designer do Webflow, cole na caixa de calibração, e a ferramenta aprende o formato atual e passa a usá-lo (salvo apenas no seu navegador).

Dicas para ícones no Webflow

• Nenhuma classe é adicionada por padrão. Se quiser um dimensionamento compartilhado, digite um nome de classe e reutilize; use unidades fluidas se os ícones precisarem acompanhar o texto.
• SVGs muito grandes ou complexos (ilustrações, mapas) funcionam melhor como imagens. Os Embeds têm limite de caracteres (atualmente 50.000).
• Para fundos ou máscaras SVG, use a ferramenta SVG para CSS; para projetos React, use SVG para JSX.

Também pesquisado como: embed svg webflow, figma para webflow, ícone svg webflow, webflow clipboard, colar svg webflow, custom element webflow, currentcolor svg.

Ferramentas que combinam com: SVG para Webflow

• Figma CSS para Webflow — Transforme a saída de “Copy as CSS” do Figma em valores organizados que você pode digitar direto no painel Style do Webflow.
• Markdown para Rich Text do Webflow — Cole o Markdown, confira a prévia e copie como rich text formatado — títulos, listas, links e negrito chegam corretos no elemento Rich Text do Webflow.
• Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
• Redirecionamentos WordPress para Webflow — Ao migrar um site do WordPress para o Webflow, quase todas as URLs mudam: caminhos de posts com data, arquivos /category/, barras no final e slugs de páginas.