<template>
  <i :title="tooltipText" @click="$emit('click')">
    <span class="sr-only" v-html=srHtml></span>
  </i>
</template>

<script>
export default {
  props: {
    alt: String,
    srOnly: Boolean
  },
  data: function() {
    return {
      tooltipText: this.srOnly ? null : this.alt.replace(/~/g, ''),
      srHtml: this.alt.replace(/~/g, '&nbsp;')
    };
  }
}
</script>
