Importar SVG como componente React com importação dinâmica no Next

Quando trabalhamos com React ou Next, uma dúvida comum é se é possível importar SVGs como componentes React usando importações dinâmicas. No meu time, a gente costuma usar o ReactComponent para transformar SVGs em componentes, o que facilita alterar cores e tamanhos via props.

Porém, ao tentar usar import() para fazer isso dinamicamente, a coisa fica mais complexa. Segundo uma discussão que encontrei no StackOverflow, dá pra fazer sim, mas requer algumas estratégias extras, como usar React.lazy ou importações condicionais. A decisão fica mais saudável quando o time consegue medir o impacto depois.

A grande questão é que essa abordagem pode impactar na performance e na experiência de desenvolvimento, já que o carregamento fica mais lento e o controle de erro mais difícil. Para projetos que precisam de alta performance ou muitas variações, acho que vale a pena avaliar o impacto antes de implementar. 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.

No seu cenário, usar React.lazy junto com Suspense pode ajudar a resolver essa questão, carregando os SVGs só quando necessário. Assim, você consegue uma maior flexibilidade sem sacrificar a performance na hora do carregamento inicial. 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 decisão fica mais saudável quando o time consegue medir o impacto depois.

Quem já fez alguma implementação parecida? Quais as armadilhas que vocês encontraram na prática?