React: inline svg mask property

Question

I have this code for inline svg icon:

@Icon = React.createClass
  render: ->
    <svg width="22" height="22" viewBox="0 0 22 22">
      <defs>
        <path d="M16.865 6.887c.136.449 2.028.624 2.086 1.209a8.862 8.862 0 0 1-.002 1.754c-.059.585-1.951.741-2.089 1.19-.138.45-.318.882-.542 1.296-.223.415 1 1.861.625 2.315a8.954 8.954 0 0 1-1.251 1.242c-.457.373-1.916-.839-2.333-.617a7.272 7.272 0 0 1-1.305.538c-.453.137-.607 2.014-1.196 2.072a9.062 9.062 0 0 1-1.766.002c-.589-.057-.767-1.934-1.22-2.07a7.221 7.221 0 0 1-1.304-.535c-.417-.221-1.85.994-2.307.621a8.911 8.911 0 0 1-1.248-1.239c-.374-.453.824-1.902.601-2.316a7.077 7.077 0 0 1-.538-1.295c-.137-.449-2.002-.602-2.06-1.186a8.939 8.939 0 0 1 .002-1.754c.059-.585 1.924-.763 2.062-1.213.137-.449.318-.881.541-1.296.224-.414-.972-1.838-.596-2.293a9.057 9.057 0 0 1 1.25-1.242c.458-.373 1.889.817 2.306.595a7.346 7.346 0 0 1 1.305-.538C8.339 1.991 8.521.136 9.11.078a9.061 9.061 0 0 1 1.766-.002c.588.057.739 1.911 1.192 2.047.452.136.887.315 1.304.536.416.221 1.877-.972 2.334-.6.457.372.873.785 1.248 1.239.375.454-.851 1.88-.629 2.294.223.414.403.846.54 1.295zm-6.852-2.376A4.498 4.498 0 0 0 5.514 9a4.486 4.486 0 0 0 4.494 4.484 4.498 4.498 0 0 0 4.499-4.489 4.486 4.486 0 0 0-4.494-4.484z" id="a"/>
        <mask id="b" x="-2" y="-2" width="22.02" height="21.896">
          <path fill="#fff" d="M-1.026-1.966h22.02V19.93h-22.02z"/>
          <use xlinkHref="#a"/>
        </mask>
      </defs>
      <use mask="url(#b)" xlinkHref="#a" transform="translate(1 2)" strokeWidth="4" stroke="#0070D9" fill="none" fillRule="evenodd"/>
    </svg>

But react skip this property: mask="url(#b)"

demo: https://jsfiddle.net/88kLutmb/

Answer 1

It seems to work fine: https://jsfiddle.net/07xre6dx/ I assume that you are using some old react version, since use tag with map attribute wasn't supported until 15.0 version:

Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we added support for all the SVG attributes that are recognized by today’s browsers. If we missed any of the attributes you’d like to use, please let us know. As a bonus, thanks to using document.createElement, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.

Answer 2

As a workaround for now you can use dangerouslySetInnerHTML

function createMarkup() { return {__html: 'svg code here '}; };
<div dangerouslySetInnerHTML={createMarkup()} />