Fill <object> svg using jss

Question

All I want is a fill color. The source file is #000, therefore no fill is specified in the svg code.

Here's the JSX:

import dashboardIcon from '../../images/icons/Dashboard-Icon.svg'

<object className={classes.navIcon} type="image/svg+xml" data={dashboardIcon} 
alt='' />

And the JSS:

navIcon: {
width: '24px',
paddingRight: '10px',
fill: '#F7F7F7'
}

Thank you so much!

Answer 1

Very late to the party, but I found your post when I was Googling the same thing and I found a solution for SVGs in JSS that modify the child elements. Posting for posterity:

navIcon: {
   '& svg': {
    width: '24px',
    paddingRight: '10px',
   '& path': {
        fill: '#F7F7F7'
      }
    },
  }