<template>
  <i :style="{
    backgroundImage: 'url('+icons+')',
    backgroundPosition: left+'px '+top+'px'
  }"> </i>
</template>

<script>
import icons from '@/assets/images/icons.png'

const position = {
  cancel: {
    top: -9,
    left: 0
  },
  home: {
    top: -43,
    left: 0
  },
  homeactive: {
    top: -78,
    left: 0
  },
  case: {
    top: -246,
    left: 0
  },
  caseactive: {
    top: -272,
    left: 0
  },
  news: {
    top: -299,
    left: 0
  },
  newsactive: {
    top: -323,
    left: 0
  }
}

export default {
  props: ['name'],
  data () {
    return {icons}
  },
  computed: {
    top () {
      return position[this.name].top || 0
    },
    left () {
      return position[this.name].left || 0
    }
  }
}
</script>

<style scoped>
  i {
    display: inline-block;
    background-repeat: no-repeat;
    width: 14px;
    height: 16px;
    vertical-align: middle
  }
</style>
