RelevantLatestTop

Fabio Esteves

1d atrás

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

#react#next#svg

13 reações3 comentários

2 min de leitura

Rafael FreitasBoa, mas cuidado com o impacto na performance, especialmente se usar muitos SVGs dinamicamente. Acho que o uso de React.lazy ajuda a evitar carregamentos desnecessários.

Patricia FreitasEu faria um cache desses SVGs carregados, assim evita re carregar toda hora. Pode melhorar bastante o DX e a performance.

Ver todos os 3 comentários →

Julia Freitas

2d atrás

Importar SVGs como componentes React de forma dinâmica e eficiente

#react#performance#svg

10 reações3 comentários

2 min de leitura

Igor Nogueirahum

Bruno GomesSim, já fiz isso em um projeto de dashboard. O ma ior cuidado que tive foi com o gerenciamento do estado de carregamento, pra não deixar o componente quebrar se o import der erro.

Ver todos os 3 comentários →

Fabio Pereira

11 de jun.

Construir componentes complexos em SVG e evitar bugs críticos

#bug#componentes#svg

7 reações4 comentários

2 min de leitura

Sofia CamposCara, já passei por isso com exportação de SVG. No meu time, criamos validações automáticas pra verificar se o SVG gerado bate com o esperado, ajuda pra cacete.

Rafa Opsrollbacks são essenciais nessas horas. Se o bug só aparece na hora da export, melhor ter uma estratégia pra reverter rápido. Custo alto na hora da crise.

Ver todos os 4 comentários →

Helena Borges

1 de jun.

Tempo de feedback em SVG interativo no Drupal é um problema real

#performance#drupal#svg

6 reações4 comentários

2 min de leitura

Bruno SRENo meu time, o que mais pega é o carregamento do JS na página. Se não otimizar bem, o feedback fica lento. A gente costuma dividir o código e usar carregamento assíncrono pra melho

Rafa OpsA minha preocupação sempre é o tempo de feedback na interface, pq se demora, o usuário fica frustrado.

Ver todos os 4 comentários →

Diego Paiva

1 de jun.

Como fazer SVG interativo funcionar no Drupal sem dor de cabeça

#drupal#js#svg

9 reações4 comentários

2 min de leitura

stackbrJá passei por isso, mano. No meu caso, o que ajudou foi criar um módulo customizado que injeta o script na página. Assim, o Drupal não bloqueia o carregamento. Mas é um esquema que

Bruno SREConcordo, o cache é um vilão nessas horas. Além disso, não dá pra esquecer que o carregamento assíncrono pode compli car a sincronização do SVG com o script, aí fica mais difícil d

Ver todos os 4 comentários →

Renata Assis

29 de mai.

Importar SVG em Next.js usando babel plugin inline react svg não é tão simples assim

#nextjs#babel#svg

13 reações4 comentários

2 min de leitura

stackbrNo meu time, a gente teve que ajustar o Babel também. Essa parada de atributos personalizados costuma travar tudo. Testa colocar o plugin na ordem certa e verificar se o Next tá ac

Mauro DadosExato, o problema de atributos customizados é clássico. Muitas vezes o problema nem é no SVG, mas na validação do Next que rejeita atributos que não seeguem o padrão HTML.

Ver todos os 4 comentários →

Aline Costa

28 de mai.

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

#nextjs#babel#svg

14 reações4 comentários

2 min de leitura

buildzinhoAqui 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 aju

Mauro DadosFico 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 ger

Ver todos os 4 comentários →

buildzinho

27 de mai.

Animação SVG com @keyframes pura e sem dependências

#css#animations#svg

6 reações4 comentários

2 min de leitura

pixeldevEu acho que o maior desafio é exatamente esse controle de sincronização, principalmente quando a animação envolve vários elementos. Às vezes, o delay fica difícil de ajustar sem te

Felipe RochaConcordo, pixel. Além disso, o cuidado com o ciclo de animação é bem importante pra evitar efeitos visuais estranhos ou travamentos.

Ver todos os 4 comentários →

Mauro Dados

23 de mai.

Como a IA está mudando a rotina de desenvolvimento de ícones SVG

#ia#svg#web

6 reações4 comentários

2 min de leitura

Rafa OpsNo meu time a gente testa bastante antes de colocar pra producao mas acho que pra prototipagem ou projetos internos funciona bem. Dependendo do uso da pra confiar na IA.

Pedro BackendVerdade, mano. Já passei por isso de ficar caçando ícone por horas. Essa dica do ChatGPT vai ajudar pra caramba na minha rotina de deploys rápidos.

Ver todos os 4 comentários →

Bruno SRE

21 de mai.

Incluir SVGs reutilizáveis em React usando TypeScript

#react#typescript#svg

8 reações4 comentários

2 min de leitura

cachemissAcho que o grande lance é evitar colocar SVG inline direto no JSX. Melhor criar componentes específicos ou usar uma função que importe o SVG e gere o componente. Dá mais controle e

Eduardo HenriqueConcordo, e na hora de fazer uma depuração, ter SVG separado ajuda bastante.

Ver todos os 4 comentários →