parsley/app/javascript/components/AppIcon.vue

<template>
  <span class="icon" :class="sizeClass" @click="$emit('click', $event)">
    <svg v-html="svgContent" v-bind="svgAttributes"></svg>
  </span>
</template>

<script>

  import CaretBottom from "open-iconic/svg/caret-bottom";
  import CaretTop from "open-iconic/svg/caret-top";
  import LockLocked from "open-iconic/svg/lock-locked";
  import LockUnlocked from "open-iconic/svg/lock-unlocked";
  import Person from "open-iconic/svg/person";
  import X from "open-iconic/svg/x";

  const iconMap = {
    'caret-bottom': CaretBottom,
    'caret-top': CaretTop,
    'lock-locked': LockLocked,
    'lock-unlocked': LockUnlocked,
    person: Person,
    x: X
  };

  const sizeMap = {
    sm: 'is-small',
    md: '' ,
    lg: 'is-medium',
    xl: 'is-large'
  };

  export default {
    props: {
      icon: {
        validator: (i) => iconMap[i] !== undefined
      },
      size: {
        required: false,
        type: String,
        validator: (s) => sizeMap[s] !== undefined,
        default: 'md'
      }
    },

    computed: {
      svgObj() {
        return iconMap[this.icon];
      },
      svgAttributes() {
        const attrs = {
          class: this.size
        };

        for (let a of ['viewBox', 'xmlns']) {
          if (this.svgObj.attributes[a]) {
            attrs[a] = this.svgObj.attributes[a];
          }
        }

        return attrs;
      },
      svgContent() {
        return this.svgObj.content;
      },
      sizeClass() {
        return sizeMap[this.size];
      }
    }
  }

</script>

<style lang="scss" scoped>

  .icon {
    svg {
      width: 100%;
      height: 100%;
      fill: currentColor;

      &.sm {
        width: 1em;
        height: 1em;
      }

      &.md {
        width: 1.33em;
        height: 1.33em;
      }

      &.lg {
        width: 2em;
        height: 2em;
      }

      &.xl {
        width: 3em;
        height: 3em;
      }
    }

  }

</style>