An SWC enabled solution for Inline SVGs #33161
Replies: 4 comments 9 replies
-
see #26167 |
Beta Was this translation helpful? Give feedback.
-
Using @svgr/webpack and the following config works without babel: config.module.rules.push({
test: /\.svg$/,
issuer: /\.tsx?$/,
include: [options.dir],
use: [
'next-swc-loader',
{
loader: '@svgr/webpack',
options: { babel: false }
}
],
}); In your component: import Image from './image.svg';
....
<Image /> In a skeleton app with one svg import I'm not seeing a performance hit to builds. Not sure how well it scales. |
Beta Was this translation helpful? Give feedback.
-
@fakundo @OscarBarrett @elliott-w it seems any of solution doesn't work with Any workaround to fix it? |
Beta Was this translation helpful? Give feedback.
-
I use
no extra workarounds were necessary in my case, const withSvgr = (nextConfig) => {
nextConfig.webpack = (config) => {
config.module.rules.push({
test: /\.svg$/i,
use: ['@svgr/webpack']
})
return config
}
return nextConfig
}
const nextConfig = {
nx: {
svgr: true // doesn't seem to affect anything
},
//
}
const plugins = [
withNx,
withSvgr
]
module.exports = composePlugins(...plugins)(nextConfig) |
Beta Was this translation helpful? Give feedback.
-
Turning this into a separate discussion from: #30174 (comment)
Seeing lots of upvotes, but I'm not sure it gets in front of people who could help.
Beta Was this translation helpful? Give feedback.
All reactions