score:2

Accepted answer

For filter you can use CSS styles as workaround, like this:

const style = {
  filter: `url(#${app || 'default'})`
}

And the returning component...

return <circle cx={50 * idx} cy={50 * idx} r='25' style={style} />

If you only want to filter you can use plain CSS. Thus, add it to React props.

score:1

React does support SVG. The issue you've linked to has been fixed. In some cases the JSX attribute will be different to the HTML attribute, e.g. xlinkHref instead of xlink:href. It should not be necessary to use dangerouslySetInnerHTML.

In the code above, it looks as if you're simply using the wrong variable. You want this instead:

filter={`url(#${icon})`}

Related Query

More Query from same tag