svgr
Articles

Use SVGs as React Components in Astro

Migrating a website from Next.js to Astro (v4/v3), one challenge was faced using SVGs as React Components in Astro. While Next.js easily converts SVGs to React Components, Astro's default setting processes them as a base64 data URL. The solution involves utilizing the Vite bundler's vite-plugin-svgr. The approach is versatile, supporting multiple frameworks, but we should use updated Astro versions to ensure smooth SVG conversions.

EN