SVG를 React로 변환
SVG 파일을 프로젝트에 붙여넣을 수 있는 React 컴포넌트로 바꾸세요. TypeScript 또는 JavaScript, size와 title props 포함.
SVG 파일이나 폴더를 여기에 놓으세요또는 이 상자 아무 곳이나 클릭해 선택
파일은 기기에 남아 있습니다
SVG를 React로 변환하는 방법
세 단계, 약 10초. 아무것도 업로드되지 않습니다.
SVG 파일 놓기
TypeScript 또는 JavaScript 선택
복사 또는 다운로드
더 많은 무료 도구
브라우저에서 바로 아이콘을 변환, 최적화, 패키징하세요. 아무것도 업로드되지 않습니다.
- SVG를 PNG로원하는 크기의 선명한 PNG, 하나든 수백 개든.도구 열기
- PNG를 SVG로PNG나 JPG를 깔끔한 벡터로 트레이싱.도구 열기
- PNG를 ICO로16부터 256 px가 들어 있는 파비콘 .ico 파일.도구 열기
- 파비콘 & 앱 아이콘웹사이트, Chrome, iOS, Android 세트.도구 열기
- SVG 최적화보이는 변화 없이 더 작은 SVG 파일.도구 열기
- SVG 스프라이트많은 아이콘을 sprite.svg 파일 하나에.도구 열기
- 스티커 메이커WhatsApp과 Telegram 스티커 파일.도구 열기
- 아이콘 애니메이터애니메이션 SVG, Lottie, GIF, Telegram 스티커.도구 열기
- SVG를 JPG로원하는 크기의 플랫 JPG 이미지.도구 열기
- SVG를 WebP로벡터에서 작은 WebP 이미지로.도구 열기
- PNG를 WebP로웹용으로 이미지 줄이기.도구 열기
- PNG를 JPG로더 작은 사진, 흰색 또는 색상 배경.도구 열기
- JPG를 PNG로사진에서 무손실 PNG로.도구 열기
- WebP를 PNG로어디서나 열리는 PNG 파일.도구 열기
- ICO를 PNG로파비콘에서 아이콘 추출.도구 열기
- JPG를 SVG로사진과 로고를 벡터로 트레이싱.도구 열기
- SVG를 Vue로size prop이 있는 단일 파일 컴포넌트.도구 열기
- SVG를 Svelte로size prop이 있는 Svelte 컴포넌트.도구 열기
- SVG를 React Native로타입 지정 react-native-svg 컴포넌트.도구 열기
- SVG를 데이터 URI로CSS와 img 태그용 인라인 SVG.도구 열기
- SVG를 PDF로선명하게 인쇄되는 벡터 PDF.도구 열기
- PNG를 PDF로한 페이지에 한 장, A4 또는 Letter.도구 열기
- JPG를 PDF로사진을 인쇄 크기의 PDF 페이지로.도구 열기
- Lottie를 GIF로.json 또는 .lottie 파일로 만드는 애니메이션 GIF.도구 열기
- 텍스트를 파비콘으로이니셜을 favicon.ico와 앱 아이콘으로.도구 열기
- 이모지를 파비콘으로어떤 이모지든 클릭 한 번으로 파비콘으로.도구 열기
아이콘당 SVG를 JSX로 반환하는 함수 하나. size, title과 className, onClick 같은 모든 SVG prop을 받습니다.
단색 아이콘은 currentColor를 사용해 주변 텍스트 색상을 따릅니다. CSS나 color prop으로 설정하세요.
네. 컴포넌트는 의존성 없는 순수 React이므로 Next.js, Vite, Remix에서 작동합니다.
id는 React의 useId로 고유하게 만들어지므로 그라데이션이 있는 여러 아이콘이 한 페이지에서 충돌 없이 공존합니다.