svgr icon indicating copy to clipboard operation
svgr copied to clipboard

Support Qwik components (and possibly other frameworks)

Open danielbayley opened this issue 4 months ago • 0 comments

🚀 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:

  • #876 could be --format astro
  • #572 could be --format vue
  • #794 / #795 could be --format solid

etc…

danielbayley avatar Sep 29 '24 19:09 danielbayley