I am using parcel with typescript and out the box everything just works, Now when I try to include svg it didn't work,
This is because I needed to change in typescript
declare module "*.svg"
This allows me to now compile my typescript.
Now the other thing that doesn't work is now I want to import my SVG component and just use it like create-react-app 2
Import Icon from "./icon.svg"
function DisplayIcon(){
return <Icon/>
}
So this looked straightforward https://www.npmjs.com/package/@svgr/parcel-plugin-svgr yarn install and I get Can't resolve
<Typescript file>:<Line>:<Column>: Cannot resolve dependency './icon.svg' at '<Icon Location>'
So I think maybe it's the plugin and I try to use
https://www.npmjs.com/package/parcel-plugin-inlinesvg
I get the same issue.
What is it that I am missing?
I see some people have .babelrc files but the plugins should just work out the box atleast that is what the documentation says.
Using plugins in Parcel could not be any simpler. All you need to do is install and save them in your package.json. Plugins should be named with the prefix parcel-plugin- or @your-scope/parcel-plugin-, e.g. parcel-plugin-foo or @your-scope/parcel-plugin-foo. Any dependencies listed in package.json with these prefixes will automatically be loaded during initialization.
It seems like the plugins boot, but nothing works.
Without the plugins I get the file in my public path with a string to it in my JavaScript runtime.
What am I missing and what am I doing wrong?