Material Design Icons (mdi) 를 vue 3, nuxt 3 에서 쓰는 법

이것저것 코딩공부/Vue

Material Design Icons (mdi) 를 vue 3, nuxt 3 에서 쓰는 법

김쨔뿌 2022. 7. 19. 17:54

나진짜이거때매몇시간몇일을날렸다.

mdi 어케 쓰는지 몰라서 라이브러리 이것저것 설치하다가 결국 호환이 안맞거나 특정 아이콘들은 임포트가 안되어서 버렸음

근데 이게 알고보니 별루..안어렵던 것입니다?

각설하고 vue 3 에서 쓰는 것. 어렵지않읍니다.

우리는 https://materialdesignicons.com/ 의 아이콘을 써줄 것입니다. 이게 여러 커뮤니티에서 만들어진 구글의 메터리얼 디자인 가이드에 맞춰진 아이콘들의 모음입니다.

일단 설치합시다. vue는 3에 맞춰 대충 준비해주십쇼.

npm install @mdi/font @mdi/js

mdi font랑 js 둘 다 설치해야합니다. 저 가증스러운 사이트는 font만 설치하라하는데 막상 아이콘 클릭하면 mdi/js에서 임포트함. 쒸익..!!

그리고 저 사이트에 들어가서 원하는 아이콘을 클릭하면 뭐라고 임포트 해야할지 적혀있습니다. 아래는 예시로 가져온 것.

import { mdiAbTesting } from '@mdi/js';

이건 만들어둔 .vue 파일에서 불러와주십쇼. 그리고 저걸 <template> 내에서 {{ mdiAbTesting }} 을 찍으면 이런게 찍히니다.

M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z

이거 뭐냐면.. svg path 에 들어가는 d값임.

svg는 대충 이렇게 생겼는데요

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M17.5 40q-1.45 0-2.475-1.025Q14 37.95 14 36.5q0-1.45 1.025-2.475Q16.05 33 17.5 33q1.45 0 2.475 1.025Q21 35.05 21 36.5q0 1.45-1.025 2.475Q18.95 40 17.5 40Zm13 0q-1.45 0-2.475-1.025Q27 37.95 27 36.5q0-1.45 1.025-2.475Q29.05 33 30.5 33q1.45 0 2.475 1.025Q34 35.05 34 36.5q0 1.45-1.025 2.475Q31.95 40 30.5 40Zm-13-12.5q-1.45 0-2.475-1.025Q14 25.45 14 24q0-1.45 1.025-2.475Q16.05 20.5 17.5 20.5q1.45 0 2.475 1.025Q21 22.55 21 24q0 1.45-1.025 2.475Q18.95 27.5 17.5 27.5Zm13 0q-1.45 0-2.475-1.025Q27 25.45 27 24q0-1.45 1.025-2.475Q29.05 20.5 30.5 20.5q1.45 0 2.475 1.025Q34 22.55 34 24q0 1.45-1.025 2.475Q31.95 27.5 30.5 27.5ZM17.5 15q-1.45 0-2.475-1.025Q14 12.95 14 11.5q0-1.45 1.025-2.475Q16.05 8 17.5 8q1.45 0 2.475 1.025Q21 10.05 21 11.5q0 1.45-1.025 2.475Q18.95 15 17.5 15Zm13 0q-1.45 0-2.475-1.025Q27 12.95 27 11.5q0-1.45 1.025-2.475Q29.05 8 30.5 8q1.45 0 2.475 1.025Q34 10.05 34 11.5q0 1.45-1.025 2.475Q31.95 15 30.5 15Z"/></svg>

보면 path d="M~~~어쩌구 적힌 부분, 저 d 가 바로 @mdi/js 에서 불러온 놈을 넣어줄 장소입니다.

d는 걍 svg의 path 태그가 선을 그리기 위한 경로를 숫자나 알파벳으로 표현했다고 보면 될듯

그래서 저걸 그대로 d에 넣어주면 끝입니다.

<script setup lang="ts">
defineProps<{
  path: string
  fill: string
  size: number
}>()
</script>

<template>
  <div>
    <svg
      :width="size"
      :height="size"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        :d="path"
        :fill="fill"
      />
    </svg>
  </div>
</template>

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

이건 제가 만든 MaterialIcon.vue 컴포넌트입니다. 걍 가져가서 써두댐

타입스크립트도 같이 써서 defineProps가 저모냥인데 그냥 path, fill, size를 넣으면 되고

path는 위의 d값이니 @mdi/js 에서 import 해온거 넣어주고 fill은 색상, size는 픽셀단위로 크기 넣어주면 됩니다.

그리고 여태 제가 테스트한것중에는 path가 여러개인게 없었는데

만약 저걸 쓰다가보니 모양이 안맞는게 나온다?! 그럼 걍... 저 사이트에서 해당 아이콘 클릭해서 svg를 긁어오십쇼

저 버튼 눌러서 view svg 누르고 inline svg in HTML 에서 긁어서 width, height만 바꾸면 됨

그리고 nuxt 설정은 별거없드라구요 근데 전 그 별거를 몰라서 거의 이틀을 날렸습니다 실화냐?!

nuxt config 설정 안에

build: {
    transpile: ['@mdi/font'],
  },

이거 넣어주면 됨.

그리고 dev 돌려주면 됨.

난 왜 이걸 인제알았지 눈물질질난다진짜 따흐흑뺘흐흑