Nuxt Inline SVG Symbols

README.md

Nuxt inline SVG Symbols

Requirements

• @nuxtjs/svg-sprite
• raw-loader

npm i raw-loader @nuxtjs/svg-sprite

icon.vue

<template>
  <svg>
    <use :href="`#i-${handle}`"></use>
  </svg>
</template>

<script>
  export default {
    props: {
      handle: {
        type: String,
        required: true
      }
    }
  }
</script>

layouts-default.vue

<template>
  <div>
    <svg-symbols></svg-symbols>
    <nuxt />
  </div>
</template>

nuxt.config.js

module.exports = {
  modules: [
    '@nuxtjs/svg-sprite',
  ]
}

svg-symbols.js

import Vue from 'vue'

// eslint-disable-next-line import/no-webpack-loader-syntax
const svgFileContent = require('!!raw-loader!../assets/sprite/gen/icons.svg').default
Vue.component('svg-symbols', {
  render: function (createElement) {
    const innerHTML = svg.replace(/.*?$/m, '') // strip declaration
    const style = 'height: 0; width: 0; position: absolute; top: 0; z-index: -1'
    return createElement('div', { domProps: { innerHTML }, attrs: { style } })
  }
})

Thanks, @leviwheatcroft! Updated the Snippet.