Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Fico pensando na questão da manutenção. Usar soluções como SVG inline é ótimo, mas traz complexidade na hora de atualizar os ícones. Melhor meesmo é ter uma estratégia clara de gerenciamento dos assets.
Aqui no meu time, a maior dor é justamente esse lance de atributos customizados. Sempre tenho que fazer workaround pra evitar esses erros. No seu caso, talvez usar o svgr possa ajudar mais, porque ele tem uma integração melhor com Next.
Concordo com o esse comentário. Aqui, o plugin do Babel deu bastante problema com atributos data * e ourtos. O SVGR foi a saída que melhor funcionou pra gente. Mas é chato, tem que testar bastante.
No meu time, a gente preferiu usar o svgr direto na configuração do webpack, aí consegue importar SVG como componentes React sem esses problemas de atributos. Acho que vale testar também.