투명성과 애니메이션을 유지하면서 Next.js 13에서 애니메이션 SVG 파일을 가져오는 방법은 무엇입니까?

Question

Next.js 13에서 애니메이션 SVG 파일 가져오기

으아아아

객체 태그는 애니메이션 SVG를 제공하지만 배경색은 흰색입니다(원본 SVG의 배경은 투명했습니다. 이미지는 투명한 SVG를 제공하지만 애니메이션은 없습니다. SVGR이나 다른 것을 사용해야 합니까? 이것은 Next.js 13에 있습니다.

투명 애니메이션 svg 파일을 가져오고 싶습니다. 나는 SVGR을 사용해야 한다고 생각하지 않기 때문에 SVGR을 엉망으로 만들고 싶지 않습니다.

Answer 1

SVG를 래핑하는 React 구성 요소를 다음과 같이 만들 수 있습니다.

으아아아 으아아아

여기에서는 테마와 결합된 Tailwind CSS를 사용하여 SVG가 밝은 색상을 사용해야 하는지 어두운 색상을 사용해야 하는지 결정합니다(-light 和 -dark는 사용자 정의 색상일 뿐입니다).
또한 SVG를 React 구성요소로 자동 변환하는 React SVGR 웹사이트도 확인해 보세요.

주의
저는 일부 SVG에서 next build 时遇到了问题，这些 SVG 的主体内有 와 같은 태그를 실행하기 위해 Typescript를 사용하고 있습니다.
다른 솔루션을 시도했지만 아무 것도 작동하지 않는 것 같아서 파일 확장자를 .tsx 替换为 .jsx에서 변경했고 빌드가 원활하게 진행되었습니다.