Built-in svg preprocessing similar to `@sveltejs/enhanced-img`

Describe the problem

It would be nice if svg files could be imported as Svelte components and transform them at build time to add all the props that the user passes. Also, a plus would be to leverage vite-plugin-svgo to optimize them at build time the same way sveltejs/enhanced-img leverages vite-imagetools.

Describe the proposed solution

Add the possibility to import SVG files as Svelte components, inline SVG code or urls to @sveltejs/enhanced-img, or discuss the possibility to create a new @sveltejs/enhanced-svg package for this.

example:

if this example.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle r="45" cx="50" cy="50" fill="currentColor" />
</svg>

is imported like this:

<script>
  import Example from '$images/example.svg?enhanced'
</script>

<enhanced:svg src={Example} width="24px" height="24px" style="--stroke-blue" class="primary-bg" />

then it would render:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="24px" height="24px" style="--stroke-blue" class="primary-bg">
  <circle r="45" cx="50" cy="50" fill="currentColor" />
</svg>

Alternatives considered

• Using @poppanator/sveltekit-svg
• Manually adding .svelte extension and transforming all svg files in the project to export the neccesary props

Importance

nice to have

Additional Information

No response

Start by reading the proposed @sveltejs/enhanced-img approach and the linked vite-plugin-svgo integration. Compare the listed alternatives, including @poppanator/sveltekit-svg, before defining the package or import design. Done should support SVG imports as components, inline SVG or URLs, user-passed props, and build-time optimization.