CODEWITHSUNDEEP
reactjssvg
CNK
CNK

Reputation: 162

Multiple color fill on SVG as component in React

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

Upvotes: 3

Views: 1515

Answers (1)

CNK
CNK

Reputation: 162

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'/>

Upvotes: 3

Related Questions