SVG traducido con svg.style = "flat"

Úselo cuando una aplicación web integre ilustraciones o diagramas SVG específicos de configuración regional y los referencie por código de configuración regional en tiempo de ejecución.

Configuración

"features": {
  "translateSVG": true
},
"svg": {
  "sourcePath": "images",
  "outputDir": "public/assets",
  "style": "flat"
}

translate-svg lee cada .svg dentro de images/ y escribe un archivo por configuración regional:

public/assets/
├── dashboard.en-GB.svg
├── dashboard.de.svg
├── dashboard.fr.svg
└── dashboard.es.svg

Referencia en la aplicación

<img src={`/assets/dashboard.${locale}.svg`} alt="Dashboard diagram" />

Recomendación de estructura de origen

Mantenga los SVG de origen separados del directorio de salida. Con sourcePath: "images" y outputDir: "public/assets", ambos directorios son distintos. Nunca establezca ambos en el mismo directorio.

Ejemplo de implementación

ejemplos/nextjs-app — bloque svg en ai-i18n-tools.config.json (sourcePath: "images", outputDir: "public/assets", svg.style = "flat"); origen translation_demo_svg.svg; salidas por configuración regional en public/assets/ (p. ej. translation_demo_svg.de.svg); URL de tiempo de ejecución en page.tsx (/assets/translation_demo_svg.${locale}.svg).

---