I'm currently working with nextjs and utilizing the svgr plugin in my nextjs configuration to incorporate svg files as Components. Here is a snippet of my nextjs config:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"],
});
return config;
},
images: {
disableStaticImages: true,
},
};
Within my project, I have stored all my svg files in a directory named icons within public/static so that I can easily import them like this:
import {Camera} from 'public/static/icons'
However, when trying to utilize <Camera/>, I encounter the following error:
JSX element type 'Camera' does not have any construct or call signatures.
This appears to be a TypeScript issue, but how can I go about resolving it? I attempted to create a @types folder and include an index.d.ts file with the following content:
declare module "*.svg" {
const content: any;
export default content;
}
Unfortunately, this solution did not resolve the problem.