Svg Component, need help

Expo SDK
1

Hello everyone, I love developing with Expo! I’ve been using the Svg component for many of my images, But I can’t seem to get one of them to work. Could anyone here help me or point me in the right direction? this is the raw svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <polygon id="path-1" points="0 0 20.37 0 20.37 21 0 21"></polygon>
    </defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="FOX-Head-Copy">
            <g id="Group-3">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <g id="Clip-2"></g>
                <path d="M8.80327912,19.3900691 L10.2841814,21 L11.8388499,19.3067862 C13.1725297,17.8544428 14.7256485,16.6073656 16.4551242,15.6005396 L20.3628713,13.345398 L18.8422965,8.71870439 L20.37,0.0216721461 L13.3609744,2.66815079 L6.82801954,2.66815079 L0.144432914,0 L1.66252822,8.71251235 L0,13.3534476 L4.00847829,15.5878459 C5.80955053,16.6104616 7.422798,17.8894278 8.80327912,19.3900691 Z M7.67911993,16.7779563 C6.77501948,16.0256233 5.80552129,15.3460467 4.78240315,14.7516107 L8.85379964,15.8045674 L7.67911993,16.7779563 Z M10.249158,14.6488228 L3.66537263,9.29456427 L16.7129958,9.29456427 L10.249158,14.6488228 Z M12.8625879,16.7739315 L11.6624929,15.7980657 L15.7410181,14.7314865 C14.7225491,15.3327338 13.7589398,16.0181928 12.8625879,16.7739315 Z M12.1407332,14.5364372 L17.9363364,9.73543764 L18.8085128,12.7924487 L12.1407332,14.5364372 Z M18.8949866,1.75792065 L17.9152603,7.33602147 L14.4318236,3.44308482 L18.8949866,1.75792065 Z M6.99662792,3.76383258 L13.2047637,3.76383258 L17.1726396,8.19888248 L3.42175832,8.19888248 L6.99662792,3.76383258 Z M1.62409543,1.7795928 L5.79963239,3.44618084 L2.60506147,7.40908756 L1.62409543,1.7795928 Z M2.52571635,9.81067095 L8.334647,14.5345796 L1.60332933,12.7939967 L2.52571635,9.81067095 Z" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
            </g>
        </g>
    </g>
</svg>

And this is what I tried

  <Svg width="21" height="21" style={{ borderWidth: 3, borderColor: 'red' }}>
    <Defs>
      <Polygon id="path-1" points="0 0 20.37 0 20.37 21 0 21" />
    </Defs>
    <G id="FOX-Head-Copy">
      <G id="Group-3">
        <Mask id="mask-2" fill="white">
          <Use href="#path-1" />
        </Mask>
        <G id="Clip-2" />
        <Path
          d="M8.80327912,19.3900691 L10.2841814,21 L11.8388499,19.3067862 C13.1725297,17.8544428 14.7256485,16.6073656 16.4551242,15.6005396 L20.3628713,13.345398 L18.8422965,8.71870439 L20.37,0.0216721461 L13.3609744,2.66815079 L6.82801954,2.66815079 L0.144432914,0 L1.66252822,8.71251235 L0,13.3534476 L4.00847829,15.5878459 C5.80955053,16.6104616 7.422798,17.8894278 8.80327912,19.3900691 Z M7.67911993,16.7779563 C6.77501948,16.0256233 5.80552129,15.3460467 4.78240315,14.7516107 L8.85379964,15.8045674 L7.67911993,16.7779563 Z M10.249158,14.6488228 L3.66537263,9.29456427 L16.7129958,9.29456427 L10.249158,14.6488228 Z M12.8625879,16.7739315 L11.6624929,15.7980657 L15.7410181,14.7314865 C14.7225491,15.3327338 13.7589398,16.0181928 12.8625879,16.7739315 Z M12.1407332,14.5364372 L17.9363364,9.73543764 L18.8085128,12.7924487 L12.1407332,14.5364372 Z M18.8949866,1.75792065 L17.9152603,7.33602147 L14.4318236,3.44308482 L18.8949866,1.75792065 Z M6.99662792,3.76383258 L13.2047637,3.76383258 L17.1726396,8.19888248 L3.42175832,8.19888248 L6.99662792,3.76383258 Z M1.62409543,1.7795928 L5.79963239,3.44618084 L2.60506147,7.40908756 L1.62409543,1.7795928 Z M2.52571635,9.81067095 L8.334647,14.5345796 L1.60332933,12.7939967 L2.52571635,9.81067095 Z"
          id="Fill-1"
          fill="blue"
          mask="url(#mask-2)"
        />
      </G>
    </G>
  </Svg>``
2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.