Svg issues on Safari

I am using svg icons for expanding and collapsing a component. They are rendering correctly as you can see in the following image:

but when I expand a component and perform an action the svgs begin to look like this:

I have verified there is absolutely no change in the svg component and they return to the correct view after I expand another component. This issue is occuring at multiple locations where I am using svg icons. I am using React and the svg icons are loaded as components. This only occurs on Safari and no other browser

Edit

The code for the svg is :

export const CollapseIcon = () => (<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="24"
height="24"
viewBox="0 0 24 24">
<defs>
  <path
    id="gt4gdtq39a"
    d="M7.146 9.146c.174-.173.443-.192.638-.057l.07.057L12 13.293l4.146-4.147c.174-.173.443-.192.638-.057l.07.057c.173.174.192.443.057.638l-.057.07-4.5 4.5c-.174.173-.443.192-.638.057l-.07-.057-4.5-4.5c-.195-.196-.195-.512 0-.708z"
  />
</defs>
<g fill="none" fillRule="evenodd">
  <g>
    <g transform="translate(-956 -290) translate(956 290)">
      <mask id="reyuf8n5tb" fill="#fff">
        <use xlinkHref="#gt4gdtq39a" />
      </mask>
      <use fill="#000" fillRule="nonzero" xlinkHref="#gt4gdtq39a" />
      <g fill="#F7274A" mask="url(#reyuf8n5tb)">
        <path d="M0 0H24V24H0z" />
      </g>
    </g>
  </g>
</g>

);

and I am using it as a simple component like:

      {expanded ? <CollapseIcon /> : <ExpandIcon />}

Svg issues on Safari

0 Answers