Vue에서 Svg사용하기

Vue3 CompositionApi에서 Svg를 사용하는 방법들에 대해 소개하고, 
개인적으로 가장 효율적이라고 생각되는 Svg 컴포넌트화 방식에 대해 자세히 설명한다.

Loading a standard HTML SVG

vue의 template부분에 직접적으로 svg파일을 사용하는 방식으로 크게 아래 두가지가 있다. 

• vue의 template안에 직접 <svg> 태그 작성
• <img>태그의 src에 svg파일의 위치 연결

장점

• 크게 고민할 필요 없이 사용가능하며, svg 코드 값을 직접 수정, 변수를 전달 할 수도 있다.

단점

• svg파일이 조금만 복잡해져도 가독성이 매우 저하된다.

---

vue-svg-loader 사용

vue에서 직접적으로 svg를 load 할 수 있도록 도와주는 vue-svg-loader 라이브러리가 있다.

아래 코드 예시에서 볼 수 있듯이 import한 svg파일을 바로 template태그 안에 사용할 수 있다. 

<template>
	<div>
    	<plus-svg>
    </div>
</template>

<script lang="ts">
import PlusSvg from '@/icons/svg/Plus.svg';

export default defineComponent({
	components: { PlusSvg, CheckBox },
	props: {
	},
})
</script>

장점

• 직관적이다.
• 가독성이 좋다.

단점

• 초기 설정해줘야 하는 부분들이 존재한다. 어렵진 않지만, 귀찮을 수 있다.
• Vue컴포넌트 내의 변수를 Svg파일에 전달할 수가 없다. (e.g. 사이즈 변수 등)

---

Svg Vue Component

Best Practice라고 생각하는 방법이다.
Svg파일만을 위한 VueComponent를 만들고 이를 import해서 사용한다.

 

아래코드는 히어로즈아이콘에서 다운받은 Plus Svg 파일을 Vue 컴포넌트화한 예시이다. 
코드에서 볼 수 있듯이, props로 변수를 전달할 수 있어 원하는 대로 값을 변경 가능하다.

 

<template>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		:width="size"
		:height="size"
		viewBox="0 0 24 24"
		fill="none"
		stroke="currentColor"
		stroke-width="2.5"
		stroke-linecap="round"
		stroke-linejoin="round"
		class="feather feather-plus"
	>
		<line x1="12" y1="5" x2="12" y2="19"></line>
		<line x1="5" y1="12" x2="19" y2="12"></line>
	</svg>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	name: 'plusSvg',
	props: {
		size: { type: String, required: true },
	},
	setup() {
		return {};
	},
});
</script>

<style lang="scss"></style>

장점

• props를 이용할 수 있다.
• 가독성이 좋다.
• import가 직관적이다.

단점

• 관리해야 하는 컴포넌트 수가 늘어날 수 있다.(하지만, 이 부분은 어쩔 수 없다고 생각한다.)