BlIconAv

BlIconAv is a Vue component that will render icon as SVG

How to Use

Default Import Icon per Component

With this kind of import you just include icons that was imported.

• App.vue

<template>
  <div>
    <IcoBukalapak color="#DC143C" />
    <IcoBukamall />
  </div>
</template>

<script>
import IcoBukalapak from '@bukalapak/bazaar-visual/dist/components/IcoBukalapak'
import IcoBukamall from '@bukalapak/bazaar-visual/dist/components/IcoBukamall'

export default {
  name: 'App',
  components: {
    IcoBukalapak,
    IcoBukamall
  }
}
</script>

Selective Import Icon per Component

Don’t forget to install babel-plugin-import (opens new window) and add babel config like below, to prevent import the whole icon bundle.

• App.vue

<template>
  <div>
    <IcoBukalapak color="#DC143C" />
    <IcoBukamall />
  </div>
</template>

<script>
import { IcoBukalapak, IcoBukamall } from '@bukalapak/bazaar-visual'

export default {
  name: 'App',
  components: {
    IcoBukalapak,
    IcoBukamall
  }
}
</script>

• babel.config.js

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "@bukalapak/bazaar-visual",
        libraryDirectory: "dist/components",
        camel2DashComponentName: false,
      },
      "Icon"
    ]
  ]
}

Register Icon per Component as Global

If you tired import same icon in different pages, you can register icon as global.

• main.js

import Vue from 'vue'
import App from './App.vue'
import IcoBukalapak from '@bukalapak/bazaar-visual/dist/components/IcoBukalapak'
import IcoBukamall from '@bukalapak/bazaar-visual/dist/components/IcoBukamall'

Vue.component(IcoBukalapak.name, IcoBukalapak)
Vue.component(IcoBukamall.name, IcoBukamall)

new Vue({
  render: h => h(App),
}).$mount('#app')

• App.vue

<template>
  <div>
    <IcoBukalapak color="#DC143C" />
    <IcoBukamall />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

Default import BlIconAv

Since Bazaar Visual v1 BlIconAv will act as component wrapper, it’s great if you work with dynamic icons.

Props

Prop	Type	Default	Description
icon	Object	-	Icon's Name
color	String	#2E2E2E	Icon's Color, only receive hex value

• App.vue

<template>
  <div>
    <BlIconAv 
      :icon="iconBukalapak" 
      color="#DC143C" 
    />
  </div>
</template>

<script>
import BlIconAv from '@bukalapak/bazaar-visual/dist/components/BlIconAv'
import IcoBukalapak from '@bukalapak/bazaar-visual/dist/components/IcoBukalapak'

export default {
  name: "App",
  components: {
    BlIconAv, 
  },
  computed: {
    iconBukalapak() {
      return IcoBukalapak
    },
  },
};
</script>