title: I can't modify my SVG component in my React Application
body: <p>I have been trying to fill the color of an SVG component in React, but it won't work.</p>
  
  <p>I've tried using an image tag to React. However, I read on the React docs that CSS with the img tag isn't supported.</p>
  
  <pre><code>//css
  .dotSvg{
    position: relative;
    fill: #5AE2EB;
  }
  //React
  //import
  import { ReactComponent as Dot } from './dot.svg';
  
  //code itself
  &lt;div className="home"&gt;
    &lt;Dot className="dotSvg"/&gt;
    &lt;h3&gt;Home&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to be able to use fill and other kinds of SVG modifiable attributes. </p>
  
  <p>update:This is my css file code setup. .dotSvg is a item of .container class. Still need help</p>
  
  <pre><code>.container{ display: grid;
   text-align: center; 
  grid-template-columns: auto auto auto auto auto; 
  position: sticky; 
  top: 0; 
  }
  
   .dotSvg{ cursor: pointer; 
  position: r
  elative; 
  fill: #5AE2EB; 
  }
  
  ///svg file
  &lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;&lt;svg width="100%" height="100%" viewBox="0 0 2 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"&gt;&lt;circle cx="1" cy="1" r="1" style="fill-opacity:0;"/&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>Solved! I found out that the svg had a fill-opacity: 0; style on it so I removed it or you could put it to one to fix this.</p>