[Vue.js] Material Design Icons (MDI) 사용법

안녕하세요, 오늘은 Material Design Icons (MDI) 사용 하는 방법에 대해서 알아보겠습니다.

 

이를 위해 다음과 같은 명령어를 통해 패키지를 설치합니다.

 

npm install @mdi/js

npm install @jamescoyle/vue-icon

 

위의 패키지를 설치 후 Vue Component 내 다음과 같이 사용할 수 있습니다.

 

<script>
import {mdiCamera} from "@mdi/js";
import SvgIcon from '@jamescoyle/vue-icon'

export default {
  name: 'TestApp',
  components: {
    SvgIcon
  },

  data: () => ({
    path: mdiCamera,

  }),
}

</script>

 

위의 코드는 Javascript 관련 코드 입니다. 이를 활용하여, <template></template> 내부에서 다음과 같이 사용할 수 있습니다.

 

<template>
	<svg-icon type="mdi" :path="path"></svg-icon>
</template>

 

다양한 Icons 관련 해서는 다음 링크에서 확인 가능합니다. 

 

https://pictogrammers.com/library/mdi/

Material Design Icons - Icon Library - Pictogrammers

 

---

이상으로, Vue.js에서 Material Design Icons (MDI)를 사용하는 방법에 대해서 알아보았습니다.

감사드립니다.