Multiple color fill on SVG as component in React-CodePudding

I can change the fill of an SVG using it as a component

import { ReactComponent as Icon} from '../assets/icon.svg'
...
<Icon fill='#000' />

With "current" on the fill field inside the SVG file

<path fill="current" />

But I have two differents path. How can I set them to have differents fills?

<path fill="current" />
<path fill="otherColor?" />

CodePudding user response：

I managed to use different colors by creating a component that return that SVG and accept props

const Icon = (props) => (
  <svg>
    <g>
      <path fill={props.outside} />
      <path fill={props.inside} />
    </g>
  </svg>
)
...
<Icon outside='#000' inside='red'/>