JSX, TSX를 SVG로 변환하기

React Native에서 SVG를 컴포넌트화하여 사용하는 경우가 많은데 이를 위해 SVG -> JSX/TSX로 변환하는 컨버터는 쉽게 찾을 수 있다. 그러나 그 반대의 경우인 JSX/TSX -> SVG로 변환하고자 할 땐 어떻게 해야 할까? 이 경우엔 컨버터나 방법을 찾기 어려웠는데 쉬운 방법이 있다. 바로 JSX/TSX 컴포넌트에서 return 값만을 빼내어 각 컴포넌트들을 svg 태그로 변환해주고svg 태그에 xmlns="https://www.w3.org/2000/svg" 어트리뷰트를 추가해주면 된다.xmlns를 추가해주지 않으면 보통 웹브라우저에선 svg 파일로 인식하지 않고 ‘This XML file does not appear to have any style information associa..

2024.11.04