Inline SVG with Nuxt

README.md

Inline SVG with Nuxt

I was looking for a SSR and scoped styles ready solution to implement inline SVG with Nuxt

You need svg-inline-loader and xmldom to be installed.

nuxt.config.js

module.exports = {
  
  plugins: ['~/plugins/svg-inline.js'],
  
  build: {
    
    // ...

    extend (config, { isDev, isClient }) {

      // ...

      // Store Vue loaders
      const vueLoader = config.module.rules.find(function (module) {
        return module.test.toString() === '/\\.vue$/'
      })

      // Remove SVG from default rules
      config.module.rules.forEach((rule) => {
        if (rule.test.toString() === '/\\.(png|jpe?g|gif|svg)$/') {
          rule.test = /\.(png|jpe?g|gif)$/
        }
      })
      
      // Add svg inline loader configuration
      config.module.rules.push({
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      })
      
      // Important to apply transforms on svg-inline:src
      vueLoader.options.transformToRequire['svg-inline'] = 'src'
    }
  },
}

svg-inline.js

import Vue from 'vue'
const DOMParser = process.browser ? window.DOMParser : require('xmldom').DOMParser
const parser = new DOMParser()

Vue.component('svg-inline', {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  render(h) {
    const document = parser.parseFromString(this.src, 'text/xml')
    const svg = document.getElementsByTagName('svg')[0]
    const attrs = {}

    Array.prototype.forEach.call(svg.attributes, (attribute) => {
      attrs[attribute.nodeName] = attribute.nodeValue
    })

    return h('svg', {
      ...this.data,
      attrs,
      domProps: {
        innerHTML: svg.innerHTML
      }
    })
  }
})

SVGInlineExample.vue

<template>
  <button>
    <svg-inline src="~/assets/svg/icon.svg"/>
  </button>
</template>

// Will render

<button>
  <svg viewBox="..."> <!-- inline SVG code --> </svg>
</button>

Test rules have changed - nuxt version ^2.3.4.

/\\.vue$/ => /\\.vue$/i
/\\.(png|jpe?g|gif|svg)$/ => /\\.(png|jpe?g|gif|svg|webp)$/i
/\.(png|jpe?g|gif)$/ => /\.(png|jpe?g|gif|webp)$/i