Support Qwik components (and possibly other frameworks)

[danielbayley]

🚀 Feature Proposal

Add an option/argument to the CLI, something like --format <framework>—or possibly --output?

Motivation

Many newer frameworks are better than React, the benefits of SVGR could/should be made available to all.

Example

Given the example from the README, and e.g:

npx @svgr/cli --format qwik --icon --replace-attr-values "#063855=currentColor" -- icon.svg

would produce an optimized Qwik component:

import { component$ } from "@builder.io/qwik"

const SvgComponent = component$(props => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
)

export default SvgComponent

Pitch

Requests have already come in for multiple frameworks:

• SVGA: svgr but for Astro components #876 could be --format astro
• Vue version #572 could be --format vue
• Usage with solid-js #794 / Usage with solid-js #795 could be --format solid

etc…