Functional vue icon component

icon.vue

<script>
import { has, map } from 'lodash'

export default {
  name: 'AftIcon',

  functional: true,

  props: {
    tag: {
      type: String,
      default: () => 'span'
    },

    color: {
      type: String,
      default: () => 'default'
    }
  },

  render (createElement, { props, data, scopedSlots }) {
    const _path = () => {
      if (has(scopedSlots, 'default')) {
        return map(scopedSlots.default(), (slot) => {
          return createElement('path', {
            attrs: {
              'fill-rule': 'nonzero',
              d: slot.text.trim()
            }
          })
        })
      }

      return createElement()
    }

    return createElement(props.tag, {
      ...data,
      class: [`icon-${props.color}`]
    }, [
      createElement('svg', {
        class: ['aft-icon__svg'],
        attrs: {
          xmlns: 'http://www.w3.org/2000/svg',
          viewBox: '0 0 24 24',
          role: 'img',
          'aria-hidden': true
        }
      }, _path())
    ])
  }
}
</script>

Utlizes the tailwind colors config with custom prefix icon-
https://gist.github.com/ronssij/d31b30de50200aeddd49c82b7f474b18