[Vue.js] Vue에서 SVG 사용하는 방법(How to use svg in vue app)

Vue에서 .png,.jpg 등의 이미지 파일 대신 svg를 사용하는 방법을 살펴보자.

medium.com/javascript-in-plain-english/how-to-use-svg-icons-in-your-vue-app-6e2c30865d7c 이 포스팅을 보고 의역을 하면서 여러 가지 참고 자료를 정리한 포스팅이다.

예전에는(그리고 현재까지) 웹사이트에 아이콘(이미지)를 삽입하려면 .png, .jpg 파일들을 저장해서 불러오는 방식이다.

만약 보여줘야 되는 아이콘들이 많아 질수록 많은 .png,.jpg 파일들이 필요하고 이걸 다 불러와야 된다.

운이 나쁘면, 즉 네트워크가 갑자기 느려질 경우 웹사이트에서 아이콘을 부분적으로 불러오면서 정상적으로 작동되지 않는 느낌을 받을 수 있다.

 

시간이 지나면서 이미지 스프라이트(Image Sprite) 기법을 사용한다.

즉 한 파일에 모든 아이콘을 집어 넣고 백그라운드 이미지로 보여주고 싶은 영역만 보여준다.

여러 개의 파일이 필요 없고 1개의 파일만 있으면 되는 장점이 있다.

인스타그램에서는 이 방법을 사용하다 오늘 살펴본 SVG파일로 변경했다.

 

SVG는 용량이 작고, 조작(색상 변경, 크기 변경 등) 하기 쉽다.

이번 포스팅에서는 외부 라이브러리 사용하지 않고 Vue에서 SVG파일을 보여주는 것을 살펴보겠다.

 

SVG 공통 컴포넌트 만들기

SVG를 불러오는 공통 컴포넌트를 만들어보자. 우선 전체코드를 살펴보자.

파일명과 파일경로는 /components/IconBase.vue이다.

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    :viewBox="viewBox"
    :aria-labelledby="iconName"
  >
    <title :id="iconName" lang="en">{{ iconName }}</title>
    <g :fill="iconColor">
      <slot />
    </g>
  </svg>
</template>
<script>
export default {
  props: {
    viewBox: { type: String, default: "0 0 24 24" },
    iconName: { type: String, default: "" },
    width: { type: [Number, String], default: 18 },
    height: { type: [Number, String], default: 18 },
    iconColor: { type: String, default: "currentColor" },
  },
};
</script>

각각 상황에 맞게 속성 값이 동적으로 수정할 수 있게 props와 slot를 사용했다.

간단히 살펴보자면 witdh, height는 svg의 영역을 지정한다. 즉, svg가 그려지는 영역!

viewBox는 SVG 요소의 뷰포트의 범위까지 확대, 축소, 위치 지정, 분할을 해주는 속성 값이다.

간단히 사용하는 방법을 설명하면, width='100', height:'100', viewBox='0 0 50 50' 이렇게 지정하면

svg icon 50의 크기를 width='100'에 맞춰서 2배로 확장시켜준다.

자세한 내용은 포스팅 끝 참조 링크로 남기겠다.

 

main.js에 컴포넌트를 등록하여 글로벌로 사용할 수 있게 하자.

import IconBase from '@/components/IconBase.vue'
Vue.component('icon-base', IconBase);

SVG 아이콘 세팅하기

이제 글로벌 SVG 아이콘 컴포넌트를 만들었으니 slot에 들어갈 아이콘을 넣어서 직접 확인해보자.

SVG 아이콘을 무료로 사용할 수 있는 https://icomoon.io/ 사이트를 들어가 보자.

icomoon 사이트

오른쪽 상단 IcoMoon App을 클릭해보면 무료 SVG아이콘들을 볼 수 있다.

이제 구글 이미지를 복사하지 말고 라이선스가 있는지 없는지 확인해야 되는 귀찮은 작업을 하지 말자.

그리고 www.sketch.com/ 를 사용하면 SVG 수정이 편하다고 한다.

 

IcoMoon App에서 droplet 아이콘을 선택해보자.

IcoMoon 아이콘들

IcoMoon 아이콘 선택

 

IcoMoon 소스

위에서 path 이 부분만 복사하고 아래 파일을 생성하고 코드를 작성한다.

component/icons/IconDroplet.vue 파일을 생성한다.

<template>
  <path
    d="M27.020 14.786c-2.055-5.732-6.41-10.88-11.020-14.786-4.61 3.907-8.965 9.054-11.020 14.786-1.271 3.545-1.396 7.393 0.393 10.794 2.058 3.911 6.207 6.42 10.626 6.42s8.569-2.509 10.626-6.42c1.79-3.401 1.664-7.249 0.393-10.794zM23.086 23.717c-1.369 2.602-4.15 4.283-7.086 4.283-1.723 0-3.391-0.579-4.753-1.583 0.414 0.054 0.832 0.083 1.254 0.083 3.67 0 7.146-2.1 8.856-5.351 1.402-2.665 1.281-5.433 0.746-7.636 0.455 0.88 0.841 1.756 1.151 2.623 0.706 1.971 1.251 4.886-0.168 7.581z"
  ></path>
</template>

<script>
export default {};
</script>

<style>
</style>

만약 이 아이콘을 자주 사용할 것 같으면 아까 위에서 작성한 main.js에 글로벌 컴포넌트로 등록하여 사용한다.

아니면 해당 컴포넌트에서만 import로 불러와서 사용한다.

import IconDroplet from "@/components/icons/IconDroplet.vue";
Vue.component("icon-droplet", IconDroplet);

이제 사용할 준비 과정이 모두 끝났다.

 

SVG 아이콘 사용하기

이제 사용하고 싶은 컴포넌트에 가서 아래 코드만 적어주면 된다.

<icon-base
  viewBox="0 0 32 32"
  width="24"
  height="24"
  iconColor="rgba(0,0,0,0.80)"
  icon-name="droplet">
  <icon-droplet/>
</icon-base>

SVG 아이콘

위 이미지처럼 SVG아이콘이 잘 보인다.

 

최종 코드

codesandbox.io/s/amazing-drake-w2mhh?file=/src/components/HelloWorld.vue

결론

SVG를 그동안 복사하고 붙여 넣기로 작업했는데 이번 포스팅을 쓰면서 SVG 체계적으로 사용할 수 있고 디자이너와 상의해 프로젝트에도 적용해봐도 좋을 것 같다. 대신 viewBox나 svg에 대한 공부를 많이 해야 될 것 같다.

참조 링크

medium.com/javascript-in-plain-english/how-to-use-svg-icons-in-your-vue-app-6e2c30865d7c

ryujek.tistory.com/entry/viewBox

developer.mozilla.org/ko/docs/Web/SVG/Tutorial/%EC%9C%84%EC%B9%98

m.blog.naver.com/PostView.nhn?blogId=phlox__&logNo=221244091905&proxyReferer=https:%2F%2Fwww.google.com%2F