SVG → React
어떤 SVG 파일이든 바로 붙여 넣을 수 있는 JSX로 — 속성은 React 방식으로 바꾸고, props는 루트에 펼치고, 필요하면 TypeScript까지.
또는 클릭해서 찾기 — SVG만 가능
컴포넌트 이름은 파일 이름에서 가져오므로 arrow-left.svg는 ArrowLeft가 됩니다.
같은 컴포넌트에 SVGProps<SVGSVGElement> 타입을 붙인 것입니다.
마크업만 있습니다. 이미 가지고 있는 컴포넌트 안에 붙여 넣을 때 쓰세요.
아이콘을 컴포넌트로
JSX는 마크업처럼 보이지만 실은 JavaScript입니다. stroke-width처럼 하이픈이 들어간 속성은 유효한 식별자가 아니고, class는 예약어와 충돌하며, 인라인 style 안의 중괄호는 표현식으로 읽힙니다. 디자인 도구에서 그대로 복사한 SVG는 보통 이 중 최소 한 가지 이유로 컴파일에 실패합니다.
이 변환기는 반드시 바꿔야 하는 것만 바꾸고 나머지는 그대로 둡니다. data-와 aria- 속성은 하이픈을 유지합니다. React가 그것들을 손대지 않고 그대로 넘기기 때문이며, 이를 바꾸는 것은 접근성 레이블을 소리 없이 잃는 흔한 방법입니다.
세 단계
.svg 파일을 고르세요 — 파일은 기기에 남습니다.
완전한 컴포넌트, TypeScript 버전, 또는 순수 JSX.
다른 컴포넌트처럼 import하고 props로 스타일을 주세요.
간단한 답변
여러분이 넘긴 값이 이기게 하려는 겁니다. JSX에서는 뒤에 오는 속성이 앞의 속성을 덮어쓰므로, 스프레드를 마지막에 두면 className, width, onClick을 바깥에서 지정할 수 있습니다. 앞에 두면 파일에 박혀 있던 값이 여러분의 값을 조용히 덮어씁니다.
출력에 박혀 있는 fill이나 stroke를 currentColor로 바꾼 다음, 아무 상위 요소에서 CSS로 색을 지정하세요. 색이 여러 노드에 흩어져 있다면 먼저 SVG 색 변경 도구를 거치세요. 한 번에 전부 currentColor로 바꿔 줍니다.
직접적으로는 안 됩니다. React Native에는 DOM이 없어서 SVG를 쓰려면 react-native-svg와 Svg, Path처럼 대문자로 시작하는 요소 이름이 필요합니다. 여기서 보여 주는 속성 이름 변경 방식은 여전히 맞지만, import와 태그가 다릅니다.
원본 파일이 그렇기 때문입니다 — 압축된 SVG는 압축된 채로 남습니다. 서식을 다시 잡는 것은 별개의 작업이기 때문입니다. 먼저 SVG 정리 도구를 거치면 컴포넌트가 읽기 좋은 들여쓰기로 나옵니다.
아니요. 변환은 브라우저 안에서 이뤄지는 단순한 문자열 작업입니다.