title: How we can reduce the number of svg icons inside React project?
body: <p>I am working on a project which have around 100 icons inside the <code>assets/icons</code> folder. Some icons are quite similar such as trash(delete) icon with blue and red colour, and check icon with three different colour.</p>
  <p>How we can pass the colour as props inside svg file. So that we can reduce the number of icon as much as possible.</p>
  <p><strong>Note</strong> : <em>We don't want to make specific react component and pass the colour as props.</em></p>
  <p>Here is an working example of my code. <code>className=&quot;fill-red&quot;</code> will fill the colour in whole <code>&lt;svg /&gt;</code> . But how we can fill the colour in it's nested element like in <code>&lt;path/&gt;</code> or might be <code>&lt;rect/&gt;</code></p>
  <pre><code>import { ReactComponent as Cross } from 'assets/icons/cross.svg';
  import React from 'react';
  const Alert = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;div className=&quot;flex items-start&quot;&gt;
          &lt;Error className=&quot;mr-2 fill-red&quot; /&gt;
          {props.label}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Alert;
  </code></pre>
  <p><strong>Here is my cross.svg</strong></p>
  <pre><code>&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
  &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M15.205 4.71967C15.4978 5.01256 15.4978 5.48744 15.205 5.78033L11.023 9.96229L15.205 14.1443C15.4979 14.4372 15.4979 14.9121 15.205 15.205C14.9121 15.4978 14.4372 15.4978 14.1443 15.205L9.96233 11.0229L5.78033 15.205C5.48744 15.4978 5.01256 15.4978 4.71967 15.205C4.42678 14.9121 4.42678 14.4372 4.71967 14.1443L8.90167 9.96229L4.71971 5.78033C4.42682 5.48744 4.42682 5.01256 4.71971 4.71967C5.0126 4.42678 5.48748 4.42678 5.78037 4.71967L9.96233 8.90163L14.1443 4.71967C14.4372 4.42678 14.9121 4.42678 15.205 4.71967Z&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>