Vue.js: passing class to nested tag in component

Question

How do I insert a class into a component class tag from the HTML file. For example, if I have a component as below and I would like to have the icon field replaced by whatever I use in the html file.

MyButton.vue file:

<template>
  <component :is="type" :href="href" class="button btn">
      <i class="fa fa-lg" :class="[icon]"></i>
  </component>
</template>


<script>
  export default {
    props: {
      href: {
        type: String,
        default: null
      },
      to: {
        type: String,
        default: null
      },
      icon: {
        type: String,
        default: null
      }
    },
    computed: {
      type() {
        if (this.href) {
          return 'a'
        } else {
          return 'button'
        }
      }
    }
  }
</script>

app.js

Vue.component('my-button', require('./components/MyButton.vue').default);

html file:

<my-button class="fa-save"></my-button>

My required output would be something equivalent to:

<a type="button" class='button btn'><i class="fa fa-lg fa-close "></i></a>

Answer 1

You can directly bind props to html attributes.

In MyButton.vue:

<i class="fa fa-lg" :class="[icon]"></i>

Or you can just pass icon as a string.

<i class="fa fa-lg" :class="icon"></i>

Then, you would have to pass the props to your component caller.

<my-button icon="fa-close"></my-button>