SVG Transformer Broken

[dioptre]

In the example here:
https://github.com/parcel-bundler/website/blob/v2/src/recipes/react.md

You could also do something like "react-svg:*.svg": ["@parcel/transformer-svg-react"] instead, then only imports with that prefix would be transformed into React Components: import MyIcon from "react-svg:./MyIcon.svg";

I tried this and it didn't work.
Using:

import Logo from 'react-svg:../../img/logo-text.svg';

Results in Error:

Error: No transformers found for frontend/www/src/img/logo-text.jsx with pipeline: 'react-svg'.

  Error: No transformers found for frontend/www/src/img/logo-text.jsx with pipeline: 'react-svg'.
  at ParcelConfig.

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "react-svg:*.svg": ["@parcel/transformer-svg-react"]
  }
}

Software	Version(s)
Parcel	2 rc0
Node	14.15
npm/Yarn	berry
Operating System	mac

Thanks!

[mischnic]

I wrote that section of the docs without testing it 😶

Something like this should be possible though, one way or another

[AlexMoutonNoble]

Hi Folks.
Any motion on this thread?
I notice that using "@parcel/transformer-svg-react" seems to preclude use of url: pipeline for svgs? Am I seeing that right?

Thanks
Alex

[AntonOfTheWoods]

Does anyone have a workaround they can share?

[mischnic]

Don't use a pipeline, this will transform every svg import into a react component:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  }
}

[AntonOfTheWoods]

Don't use a pipeline, this will transform every svg import into a react component:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  }
}

Thanks, I did actually stumble across this later but ended up having to manually convert my svgs to tsx with svgr because I couldn't find a way of telling transformer-svg-react not to use svgo, which I have to do because it borks the svgs (actually, not mine but from http://samherbert.net/svg-loaders/). I couldn't find any docs and from the code I couldn't work out how to not use svgo.

[AlexMoutonNoble]

We have SVGs that are referenced by path/filename in BodyMovin animation files. We cant have these be converted to React components but would like to have them be handled by our bundler.

[dioptre]

I used the standard url: to get around this

…

On Mon, Sep 20, 2021, 10:59 AlexMoutonNoble ***@***.***> wrote: We have SVGs that are referenced by path/filename in BodyMovin animation files. We cant have these be converted to React components but would like to have them be handled by our bundler. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6688 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFZTGEFMVWD4FCB4QCRUZTUC5Y65ANCNFSM5BUTJ2ZQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[reyronald]

I also cannot use the transformer on all SVGs and need a way to exclude some. Any update on this or does anyone have a workaround?

[TheNathanBlake]

Don't use a pipeline, this will transform every svg import into a react component:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  }
}

I've just tried using this .parcelrc config, while importing to one of my React components:

import Workbench from '../../icons/workbench.svg';

Doing this gives me a "@parcel/transformer-js: cannot access a scoped thread local variable without calling set first" error.