"Call-to-action" SVG Component Vue.js

CallToAction.vue

<template lang="pug">
  router-link.button.large(:to='route')
    | {{ message }}
    .svg-icon.postfix.fill-white(
      v-once='',
      v-html='icon'
    )
</template>

<script>
// REQUIRED: npm install svg-inline-loader pug --save-dev
export default {
  name: 'call-to-action',
  props: {
    // name of file from `/src/assets/svg/*`
    iconName: {
      type: String,
      required: true
    },
    // text inside button
    message: {
      type: String,
      required: true
    },
    // named route for `vuejs/vue-router`
    // https://router.vuejs.org/en/essentials/named-routes.html
    route: {
      type: String,
      required: true
    }
  },
  computed: {
    icon () {
      const file = require(`!svg-inline-loader!@/assets/svg/${this.iconName}.svg`)
      return file
    }
  }
}
</script>

<style lang="scss" scoped>
// call settings for global SCSS access
// @import '~@/styles/settings';
.button {
  // margin: $global-padding*3;
  filter: drop-shadow(rem-calc(1) rem-calc(2) rem-calc(2) rgba(0, 0, 0, 0.3));
  &:hover {
    filter: drop-shadow(rem-calc(1) rem-calc(2) rem-calc(2) rgba(0, 0, 0, 0.4));
  }
}
</style>