[Nuxt.js] Vuetify Custom Icon 적용하기 :: 마이구미

이 글은 Nuxt.js 에서 Vuetify 에 Custom Icon 을 적용하는 것을 다룬다.
Vue 환경에서는 간단하겠지만, Nuxt 환경에서는 조금 손이 가는 작업이 필요할 수 있다.
혹시 Nuxt.js 에서 커스텀 아이콘이 잘 적용되지 않았다면 도움이 될 것이다.
참고 링크 - https://stackoverflow.com/questions/59035257/nuxt-vuetify-module-custom-component-icons-doest-work

 

vuetify 를 사용하면 기본적으로 제공하고 있는 아이콘을 쉽게 사용할 수 있다.

하지만 원하는 모든 걸 제공해주지는 않기에, 커스텀 아이콘에 대한 니즈는 나오기 마련이다.

 

Nuxt.js 환경에서 커스텀 아이콘을 추가하는 방법을 알아본다.

아마 대부분 vuetify 를 위한 초기 셋팅은 다음과 같을 것이다.

 

// nuxt.config.js
{
  ...
  buildModules: [
    '@nuxtjs/vuetify',
  ]
  vuetify: {
    theme: { ... },
    icons: { ... },
    customVariables: ['~/assets/css/_variables.scss'],
    treeShake: true
  }
}

 

nuxt 에서 vuetify 를 사용하기 위한 기본적인 설정이다.

그리고 커스텀 아이콘을 추가해보자. (https://v2.vuetifyjs.com/en/customization/icons/#using-custom-icons)

공식 문서상에서는 커스텀 아이콘을 위해서는 vuetify => icons => values 에 새로운 아이콘을 추가하면 된다.

 

import MyCustomIcon from "~/components/MyCustomIcon.vue";


{
  vuetify: {
    theme: { ... },
    icons: {
      values: {
        myCustomIcon: MyCustomIcon
      }
    }  
  }
}

 

하지만 적용되지 않는다.

크게 2가지 작업이 요구된다.

 

• buildModules 에 선언된 "@nuxtjs/vuetify" 를 modules 로 이동한다. (buildModules 로 사용해도 무관)
• vuetify 관련 설정을 nuxt.config.js 와 분리한다.

 

// nuxt.config.js
modules: ["@nuxtjs/vuetify"],

vuetify: {
   optionsPath: "./plugins/vuetify.js",
   customVariables: ["~/assets/css/variables.scss"],
   treeShake: true
}

 

// vuetify.js
import MyCustomIcon from "~/components/MyCustomIcon.vue";

export default {
  theme: { ...},
  icons: {
    values: {
        myCustomIcon: {
            component: MyCustomIcon
        },
    }
}

 

위와 같이 설정을 변경하면 된다.

기본으로 제공하는 아이콘을 사용하면서 추가된 커스텀 아이콘을 사용할 수 있다.

 

if (this.$vuetify.icons.values[this.icon) {
  return `$vuetify.icons.${this.icon}`;
} else {
  return this.icon;
}

 

buildModules 에서 modules 로 이동하면서 존재할 수 있는 이슈가 있다.

공식 문서상 buildModules 의 이점은 node_modules 의 사이즈가 크게 감소하는 것이다.

하지만 빌드된 파일을 테스트해보니 전후 변화는 거의 없었다.

 

참고 링크

codepen - https://codepen.io/avenmore/pen/mNpXbB

buildModules - https://nuxtjs.org/docs/2.x/directory-structure/modules#buildmodules