Multiple color fill on SVG as component in React

Question

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?" />

CNK · Accepted Answer · 2022-11-03 03:15:16Z

3

I managed to use different colors by creating a component that return that SVG as JSX passing colors as props

const Icon = ({inside, outside}) => (
  <svg>
    <g>
      <path fill={outside} />
      <path fill={inside} />
    </g>
  </svg>
)

<Icon outside='#000' inside='red'/>

answered Nov 12, 2021 at 20:52

CNK

1724 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1