2c:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Fluxo rápido com VS Code"}],[["$","h3","0",{"className":"text-xl font-semibold text-white mb-4","children":"Como funciona no dia-a-dia"}],["$","p","1",{"className":"text-gray-300 leading-relaxed mb-6","children":"Baixe a imagem ou SVG desejado. Em seguida, cole o SVG no Transform Tools, converta e jogue o componente diretamente no seu projeto React pelo VS Code. Sem dependências extras."}]]]}] 2d:["$","section","4",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Erros típicos: ifs nas propriedades"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Muitos SVGS vêm de apps de design com atributos escritos de maneira inválida para React. Por exemplo, fill-rule=\"evenodd\" deveria ser fillRule=\"evenodd\" . Se não converter, o React acusa erro ou ignora a propriedade."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-red-500/10 border-red-500/20 text-red-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-red-400","children":[["$","span",null,{"children":"❌"}],"Cuidado com atributos inválidos"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Nunca confie em SVGs exportados diretamente de sites: revise e converta para JSX."}]]}]]}]]]}] 2e:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Otimize sua stack com componentes SVG"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Componentizar SVGs agiliza reuso: você importa ícones, bandeiras, logos sem reinventar a roda. Basta importar e pronto: estilos, cores e tamanhos facilmente customizáveis."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-green-500/10 border-green-500/20 text-green-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-green-400","children":[["$","span",null,{"children":"✅"}],"Dica avançada"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Combine props do React para personalizar seu SVG, criando variações dinâmicas ou temáticas conforme design da sua aplicação."}]]}]]}]]]}] 2f:["$","section","6",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Prática: bandeiras não são mais png"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Trocar PNGs por SVG componentizados garante menor peso de página, melhor qualidade visual e responsividade nativa sem perdas."}]]]}] 30:["$","section","7",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Por que usar SVGs assim?"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Eles são vetoriais, nunca pixelam, permitem animações via CSS e mantêm acessibilidade se você aplicar aria-label e role no componente."}]]]}] 31:["$","section","8",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Dica de ouro: mantenha a estrutura do componente flexível"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Salve o JSX resultante em arquivos como BrazilFlag.tsx e torne os elementos principais do SVG controláveis por props. Isso expande as possibilidades."}]]]}] 32:["$","section","9",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Quando evitar usar SVGs como componentes?"}],[["$","p","0",{"className":"text-gray-300 l