Reputation: 1922
I'm using the inline-react-svg
plugin with babel in order to import inline SVG in NextJS.
That's my .babelrc
file
{
"presets": ["next/babel"],
"plugins": [
"inline-react-svg",
[
"import", {
"libraryName": "antd",
"style": true
}
]
]
}
And also, I had to declare the modules related to image extensions because I'm using TypeScript.
That's the modules declared inside the @types
folder in the root of the project
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.svg'
But I'm not able to import any SVG file because TypeScript can't find the module.
Doesn't work with absolute imports but it works with the relative path "../../public/images/icons/go-back-arrow.svg"
Upvotes: 2
Views: 8020
Reputation: 91
Another thing I just found is that the babel plugin does not work as good as the @svgr/webpack
plugin for webpack.
If you use it and the <svg />
s do not load as expected consider taking a look at
to Shifut Hossain's question here.
I saved me a lot of time! :)
Upvotes: 0
Reputation: 1922
This is a know compatibility issue between babel-plugin-module-resolver and babel-plugin-inline-react-svg
Refer to: Next.js typescript import aliases with babel-plugin-module-resolver
The PR to solve this problem isn't merged yet https://github.com/airbnb/babel-plugin-inline-react-svg/pull/17
Upvotes: 1