All files / vue-storybook/src/components/generic Icon.vue

90% Statements 9/10
50% Branches 1/2
100% Functions 3/3
90% Lines 9/10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47                      4x 4x 4x                           4x   4x 11x   8x     4x         4x            
<template>
    <font-awesome-icon
        :icon="icon"
        :style="{ fontSize: `${size}em`, color }"
        :color="color"
        @click="$emit('click')"
        fixed-width
    ></font-awesome-icon>
</template>
 
<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import * as regular from '@fortawesome/free-regular-svg-icons';
import * as solid from '@fortawesome/free-solid-svg-icons';
 
export default {
  components: {
    FontAwesomeIcon
  },
  props: {
    type: { type: String, default: 'regular' },
    name: { type: String, required: true },
    color: { type: String, required: false },
    size: { type: Number, required: false, default: 1 },
    color: { type: String, default: null }
  },
  computed: {
    iconName () {
      const { name } = this;
      const parts = name.replace(/^fa-?/i, '').split('-');
      return `fa${parts.map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('')}`;
    },
    icon () {
      const { type, iconName } = this;
 
      switch (type.toLowerCase()) {
        case 'solid':
          return solid[iconName];
 
        default:
          return regular[iconName];
      }
    }
  }
}
</script>