SVG → Vue
어떤 SVG든 .vue 단일 파일 컴포넌트로 감쌉니다 — 또는 이미 가진 컴포넌트에 넣을 템플릿 블록만 가져가세요.
또는 클릭해서 찾기 — SVG만 가능
컴포넌트 이름은 파일 이름에서 가져옵니다. script 블록은 컴포넌트 이름만 지정하므로 필요 없으면 지워도 됩니다.
마크업만 있습니다. 이미 가지고 있는 컴포넌트 안에 붙여 넣을 때 쓰세요. SVG에 인라인 style 요소가 있었다면 그 CSS는 여기가 아니라 위 파일의 style 블록에 있습니다.
이름을 바꿀 필요가 없다
Vue 템플릿은 HTML로 파싱되기 때문에 SVG를 작성된 그대로 넣을 수 있습니다. stroke-width는 그대로 stroke-width이고, class도 class 그대로이며, 인라인 style 속성도 계속 동작합니다. 변환은 대체로 파일을 감싸는 일에 가깝고, 그래서 출력이 입력과 거의 같아 보입니다.
나머지는 속성 폴스루가 처리합니다. 루트 요소가 하나면 컴포넌트에 붙인 것이 모두 svg 태그로 내려가므로, prop을 하나도 선언하지 않아도 width, class, 클릭 핸들러가 동작합니다.
세 단계
.svg 파일을 고르세요 — 파일은 기기에 남습니다.
.vue 파일 전체, 또는 템플릿만.
다른 컴포넌트처럼 import하고 크기는 바깥에서 지정하세요.
간단한 답변
필요가 없기 때문입니다. 루트가 하나인 컴포넌트는 여러분이 준 속성을 svg 태그로 그대로 넘기므로 width, height, class, 이벤트 리스너가 이미 동작합니다. props는 그 값으로 무언가를 계산하고 싶을 때만 선언하세요.
컴포넌트에 이름을 주기 위한 것뿐입니다. 이 이름은 Vue devtools와 경고 메시지에 나타납니다. 없어도 렌더링 결과는 똑같으므로 지워도 전혀 문제없습니다.
컴포넌트 아래쪽의 scoped style 블록으로 옮겨졌습니다. Vue는 템플릿 안에 있는 style과 script 태그를 버리기 때문에, 인라인 스타일시트를 거의 항상 품고 있는 Illustrator나 Figma 내보내기 SVG는 그대로 두면 색이 전부 빠진 채로 렌더링됩니다. CSS를 밖으로 옮기면 계속 동작하고, scoped 덕분에 앱의 다른 곳으로 새지도 않습니다.
박혀 있는 fill이나 stroke를 currentColor로 바꾸고 상위 요소에서 CSS로 색을 지정하세요. 변환 전에 SVG 색 변경 도구로 파일 안의 모든 색을 currentColor로 바꿔 둘 수도 있습니다.
이 출력에 대해서는 그렇습니다 — script setup과 defineOptions는 Vue 3 기능입니다. Vue 2에서도 템플릿 블록은 그대로 쓸 수 있습니다. 일반 옵션 API 컴포넌트의 template에 붙여 넣으세요.
아니요. 변환은 브라우저 안에서 이뤄지는 단순한 문자열 작업입니다.