[Figma,React] SVG이미지 겹침 현상

 

react에서 svg파일들을 불러와서 쓰려는데 모든 이미지가 한가지 이미지로만 나오는 현상이 발생했다.

 

 

 

Figma에서 SVG 파일을 다운로드 해서 사용하고 있었는데 왜 위와같은 현상이 발생하는지 찾아보니

 

<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect y="0.348633" width="28" height="28" fill="url(#pattern1)"/>
<defs>
<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_381_1705" transform="scale(0.0104167)"/>
</pattern>
<image id="image0_381_1705" width="96" height="96" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAABDklEQVR4nO3awWrCUABE0fnrLttl/7pFiu4NlvuEc0BwKXOTmIgbAAAAAHD3/XhH4keEPoAIBwQQ4YAAIhwQQIQDAohwQAARDgggwgEBRDgggAgHBPi3CM98AK+9PoJR10YQYG0EAdZGEGCXN/gUYO89vjNg7fgCrB2fGb/myI+57MRc82O+cGPudmJuNWPu82MesmKecGN+Xoh91R8AAADgGR5i4vFvj/GE4wsQjy9APL4A8fgCxOMLEI8vQDy+APH4AsTjCxCPL0A8vtcLGX+XDijjrz0THfl78wAfruVLA4iwPoAI6wOIsD7AlQjEEYgjEEcgjkAcgTgCcQTiCMQRiCMQ8vd0AAAAANifX9yL+lZAp2GmAAAAAElFTkSuQmCC"/>
</defs>
</svg>

 

위 svg 파일을 보면 id값을 pattern1을 사용하는 것으로 되어있다.

 

Figma에서 이미지들을 다운로드 받으면 해당 id들이 모두 pattern0으로 되어 있어서 이런 문제가 발생하였다.

 

 

따라서 해당 fill과 id를 모두 바꿔주면 해결된다!!