search

boopathi / react-svg-loader

A loader for webpack, rollup, babel that loads svg as a React Component
MIT License
638 stars 86 forks source link

Incorrect rendering for multiple SVGs #294

Open munkychop opened 4 years ago

munkychop commented 4 years ago

When using this library to render three SVGs — svg1, svg2, and svg3 — within the same component, I am seeing the following results:

svg1: renders correctly svg2: renders contents of both svg1 and svg2 svg3: renders contents of both svg1 and svg3

Any idea why this may be happening?

I'm seeing a <g mask="url(#a)"> added to the DOM within each SVG, all with a mask URL targeting ID "a". After deleting the <g> elements manually (using dev tools) the SVGs look as expected.

Expected output: expected

Current output: current

Full HTML output is as follows:

<header><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.027 15.345l5.517 5.184-1.386 1.47-5.608-5.27a8.145 8.145 0 01-4.833 1.59 8.17 8.17 0 01-7.974-6.374A8.156 8.156 0 017.228 2.78a8.18 8.18 0 019.937 2.365 8.15 8.15 0 01-.138 10.199zM6.37 14.5a6.113 6.113 0 004.348 1.798 6.151 6.151 0 006.15-6.14 6.15 6.15 0 00-6.15-6.139 6.113 6.113 0 00-4.35 1.798 6.097 6.097 0 00-1.8 4.342A6.095 6.095 0 006.369 14.5z" fill="#000"></path><mask id="a" maskUnits="userSpaceOnUse" x="2" y="1" width="21" height="21"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.027 15.345l5.517 5.184-1.386 1.47-5.608-5.27a8.145 8.145 0 01-4.833 1.59 8.17 8.17 0 01-7.974-6.374A8.156 8.156 0 017.228 2.78a8.18 8.18 0 019.937 2.365 8.15 8.15 0 01-.138 10.199zM6.37 14.5a6.113 6.113 0 004.348 1.798 6.151 6.151 0 006.15-6.14 6.15 6.15 0 00-6.15-6.139 6.113 6.113 0 00-4.35 1.798 6.097 6.097 0 00-1.8 4.342A6.095 6.095 0 006.369 14.5z" fill="#fff"></path></mask><g mask="url(#a)"><path d="M0 0h24v24H0V0z" fill="#BD10E0"></path><path fill="#000" d="M0 0h24v24H0z"></path></g></svg><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.715 2.515l-.002 5.408H1.696v14.592h20V2.519L7.715 2.515zm2.074 2.072l9.831.002v15.854h-1.7v-4.338h-6.436v4.338h-1.68L9.79 4.587zM3.771 9.995h3.94L7.71 20.443H3.771V9.995zm8.75 10.448h4.36v-3.302h-4.36v3.302zM11.48 10.377h6.448v-1h-6.448v1zm0 2.138h6.448v-1h-6.448v1z" fill="#000"></path><mask id="a" maskUnits="userSpaceOnUse" x="1" y="2" width="21" height="21"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.715 2.515l-.002 5.408H1.696v14.592h20V2.519L7.715 2.515zm2.074 2.072l9.831.002v15.854h-1.7v-4.338h-6.436v4.338h-1.68L9.79 4.587zM3.771 9.995h3.94L7.71 20.443H3.771V9.995zm8.75 10.448h4.36v-3.302h-4.36v3.302zM11.48 10.377h6.448v-1h-6.448v1zm0 2.138h6.448v-1h-6.448v1z" fill="#fff"></path></mask><g mask="url(#a)"><path fill="#000" d="M0 0h24v24H0z"></path></g></svg><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.007 19.5L2 4.5h20v15H2.007zm18.005-1.995h-16L4.006 6.5h16.005v11.004zM6.379 8.58h1.617v-1H5.379v2.614h1V8.58zm8.551 3.367a2.987 2.987 0 01-2.984 2.985 2.987 2.987 0 01-2.984-2.985 2.987 2.987 0 012.984-2.984 2.987 2.987 0 012.984 2.984zm-1 0c0-1.094-.89-1.984-1.984-1.984-1.094 0-1.984.89-1.984 1.984 0 1.096.888 1.984 1.984 1.985 1.094 0 1.984-.89 1.984-1.985zm4.691 1.859h-1v1.614h-1.617v1h2.617v-2.614zm-12.242 1.61h1.617v1H5.379v-2.617h1v1.617zM18.621 10.2h-1V8.583h-1.617v-1h2.617V10.2z" fill="#000"></path><mask id="a" maskUnits="userSpaceOnUse" x="2" y="4" width="20" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.007 19.5L2 4.5h20v15H2.007zm18.005-1.995h-16L4.006 6.5h16.005v11.004zM6.379 8.58h1.617v-1H5.379v2.614h1V8.58zm8.551 3.367a2.987 2.987 0 01-2.984 2.985 2.987 2.987 0 01-2.984-2.985 2.987 2.987 0 012.984-2.984 2.987 2.987 0 012.984 2.984zm-1 0c0-1.094-.89-1.984-1.984-1.984-1.094 0-1.984.89-1.984 1.984 0 1.096.888 1.984 1.984 1.985 1.094 0 1.984-.89 1.984-1.985zm4.691 1.859h-1v1.614h-1.617v1h2.617v-2.614zm-12.242 1.61h1.617v1H5.379v-2.617h1v1.617zM18.621 10.2h-1V8.583h-1.617v-1h2.617V10.2z" fill="#fff"></path></mask><g mask="url(#a)"><path fill="#000" d="M0 0h24v24H0z"></path></g></svg></header>
nezriffic commented 4 years ago

Seeing same issue (thought it is my browser glitch). In my case removing <g> elements is not an option (they are needed)

elijahmanor commented 4 years ago

FYI, this seemed to fix the problem I was having... https://github.com/gregberge/svgr/issues/150#issuecomment-415029296