1

I tried to follow these steps:

(Next.js) How can I change the color of SVG in next/image?

I'm using next.js too, but I'm unable to change the svg color

My next.config.js:

const webpack = require('webpack');

// next.config.js
module.exports = {
  images: {
    domains: ['raw.githubusercontent.com'],
  },
  entry: './components/Modal.js',
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

but the svg doesn't show up and I get these errors in the console:

next-dev.js?3515:32 Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at watchProject

next-dev.js?3515:32 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

My code:

import watchProject from "../public/icons/watch_project.svg";
[...]
<watchProject fill="blue"></watchProject>

If I use Image component the svg appear, but I can't change the properties

import watchProject from "../public/icons/watch_project.svg";
[...]
<Image src={watchProject} stroke="green" alt="star" width={18} height={18} />
Felipe Cristiano
  • 183
  • 12
  • Have you tried using `WatchProject` instead of `watchProject`? – qrsngky Aug 16 '22 at 02:45
  • That's not how webpack is configured in `next.config.js`. You need to pass the webpack config under the `webpack` property. See https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config. – juliomalves Aug 16 '22 at 21:52

0 Answers0