Importar SVG no Next.js usando Babel plugin não é tão simples quanto parece

Tem uma galera achando que é só colocar o plugin na configuração do Babel e pronto. Mas na prática, a história é outra.

No meu time, a gente tentou usar o babel-plugin-inline-react-svg pra importar SVGs direto como componentes, como se fosse uma solução mágica. A documentação até ajuda, mas na hora de aplicar no projeto, várias pegadinhas aparecem.

Primeiro, é preciso garantir que o Babel tá configurado corretamente, com o plugin na versão certa. Depois, tem que ficar atento à compatibilidade com o Next.js, que às vezes não aceita tudo de primeira. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

Um ponto que pegou aqui foi a questão dos atributos customizados, que dão erro de 'Invalid attribute name'. Isso acontece porque o plugin às vezes não lida bem com atributos que começam com 'data-'. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.

A verdade é que, na prática, usar SVGs inline no Next.js demanda atenção, testes e, muitas vezes, uma solução personalizada. Não basta só ativar o plugin e esperar que tudo funcione lindamente. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.

Quem aí já passou por isso? Como vocês resolveram a questão de importar SVGs de forma eficiente e sem dor de cabeça? Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.