SVGs in Vue.js loaded inline via HTTP with simple object cache. This is handy if you don't necessarily have single page app with full access to Webpack and want some quick and efficient way to use SVGs inline (eg. Laravel Mix). No 3rd party libraries or loaders required.

app.js

Vue.component("html-fragment", {
  functional: true,
  props: ["html"],
  render(h, ctx) {
    // eslint-disable-next-line
    const nodes = new Vue({
      beforeCreate() {
        this.$createElement = h
      }, // not necessary, but cleaner imho
      template: `<div>${ctx.props.html}</div>`,
    }).$mount()._vnode.children
    return nodes
  },
})

Icon.vue

<template>
  <html-fragment :html="icon" />
</template>

<script>
import axios from "axios"

export default {
  props: {
    name: String,
  },

  data() {
    return {
      icon: "",
    }
  },

  watch: {
    name(icon) {
      this.init()
      this.fetch()

      window.addEventListener(`svg.load.${icon}`, (event) => {
        this.icon = event.detail.data
      })
    },
  },

  mounted() {
    window.addEventListener(`svg.load.${this.name}`, (event) => {
      this.icon = event.detail.data
    })

    this.init()
    this.fetch()
  },

  methods: {
    init() {
      window.svgIcons = window.svgIcons || []

      const index = window.svgIcons.findIndex((icon) => icon.name === this.name)

      if (index === -1) {
        window.svgIcons.push({
          name: this.name,
          icon: null,
          loading: false,
        })
      }

      const item =
        window.svgIcons[
          window.svgIcons.findIndex((icon) => icon.name === this.name)
        ]

      if (item.icon) {
        this.icon = item.icon
      }
    },

    async fetch() {
      const index = window.svgIcons.findIndex((icon) => icon.name === this.name)
      const item = window.svgIcons[index]

      if (!item.icon && !item.loading) {
        window.svgIcons[index] = Object.assign(window.svgIcons[index], {
          loading: true,
        })

        const { data } = await axios.get(`/svg/icon-${this.name}.svg`)

        window.svgIcons[index] = Object.assign(window.svgIcons[index], {
          icon: data,
          loading: false,
        })

        if (window.CustomEvent) {
          const event = new CustomEvent(`svg.load.${this.name}`, {
            detail: { data },
          })
          window.dispatchEvent(event)
        } else {
          const event = document.createEvent("CustomEvent")
          event.initCustomEvent(`svg.load.${this.name}`, true, true, { data })
          window.dispatchEvent(event)
        }
      }
    },
  },
}
</script>