Button.vue

<template>
  <nuxt-link :tag="tag" :type="type" :to="link" class="button" :class="[{'button--inverse': inverse, 'button--reverse': reverse, 'button--center': center}, size ? `button--${size}` : '']">
    <svg v-if="arrow" width="30" height="31" viewBox="0 0 30 31" xmlns="http://www.w3.org/2000/svg">
      <g :transform="svgArrowTransform" fill="none" fill-rule="evenodd">
        <circle fill="#000" fill-rule="nonzero" cx="15" cy="15.5" r="15"/>
        <path fill="#FFF" d="M21 15.852L17.606 12.5l-.849.774 1.946 1.916H9v1.246h9.703l-1.946 2.129.849.935z"/>
      </g>
    </svg>
    <span>
      <slot />
    </span>
  </nuxt-link>
</template>

<script>
export default {
  props: {
    tag: {
      type: String,
      default: 'a'
    },
    link: {
      type: String,
      default: '/'
    },
    type: {
      type: String,
    },
    arrow: {
      type: String,
      default: "right"
    },
    inverse: {
      type: Boolean,
      default: false
    },
    reverse: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
    },
    center: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    svgArrowTransform() {
      if (this.arrow == "down") {
        return "rotate(90 15 15.5)";
      } else if (this.arrow == "left") {
        return "rotate(180 15 15.5)";
      }

      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  align-items: center;
  text-decoration: none;

  font-family: $font-secondary;
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: bold;

  svg {
    display: block;
    margin-right: 20px;

    path {
      @include baseTransition;
    }
  }

  span {
    display: block;
    margin-top: 4px;
  }

  &:hover {
    svg {
      path {
        transform: translateX(1px);
      }
    }
  }

  &--inverse {
    color: $color-white;

    svg {
      circle {
        fill: #FFF;
      }
      path {
        fill: #000;
      }
    }
  }

  &--reverse {
    flex-direction: row-reverse;

    svg {
      margin-right: 0px;
      margin-left: 20px;
    }
  }

  &--large {
    font-size: 35px;

    svg {
      width: 40px;
      height: auto;
    }
  }

  &--center {
    justify-content: center;
  }
}
</style>