[Vue] b-icon 전역 컴포넌트로 등록해서 별도로 관리하기

vue + bootstrap 으로 페이지를 관리하고 있었고,

필요한 아이콘은 bootstrap 에서 제공해주는 아이콘(b-icon) 을 사용하고 있었다.

---

<template>
    <b-icon-display/> 디스플레이 아이콘을 노출합니다.
</template>

<script>
import { BIcon, BIconDisplay, BIconList } from 'bootstrap-vue';
export default {
    ...
    components: { BIcon, BIconDisplay, BIconList, ... },
    ...
}
</script>

그러다보니 각 컴포넌트 별로 아이콘을 사용하기 위한 위 코드가 중복으로 들어가있었고,

중복을 제거하기 위해 b-icon 을 전역 컴포넌트로 등록해서 별도로 관리하기로 결심했다. 🌝

 

---

<template>
  <!-- component icon -->
  <b-icon v-if="name === 'LIST'" icon="list"/>
  <b-icon v-else-if="name === 'DISPLAY'" icon="display"/>
  <b-icon v-else-if="name === 'STOP_WATCH'" icon="stopWatch"/>

  <!-- icon -->
  <b-icon v-else-if="name === 'USE_Y'" icon="check-circle" scale="1.5" variant="success"/>
  <b-icon v-else-if="name === 'USE_N'" icon="x-circle" scale="1.5" variant="danger"/>
</template>

<script>
    import { BIcon, BIconDisplay, BIconList } from 'bootstrap-vue'
    export default {
        components : { BIcon, BIconDisplay, BIconList },
        props: ['name'],
    }
</script>

위와 같이 전역 컴포넌트로 사용 할 Icon.vue 파일을 생성해주고, (props 로 icon 을 노출하도록 했는데 이게 최선인지는 잘 모르겠다..)

// 전역 컴포넌트로 사용하려고 만든 Icon.vue import
import Icon from './components/Icon'

// 전역 컴포넌트로 사용하기 위해서 선언
Vue.component('icon', Icon);

...
new Vue({...})

main.js 에서 전역 컴포넌트로 등록해주면,

<template>
    <icon name="DISPLAY"/> 디스플레이 아이콘이 노출됩니다.
</template>

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

xxx.vue 에서는 이전처럼 별도의 import 와 component 선언 필요없이 바로 사용 가능하다 :D

 

참고 : https://medium.com/swlh/managing-svg-icons-in-vuejs-applications-7f5c9e7b6ffa