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.
Last active
June 1, 2021 07:49
-
-
Save rayfranco/b97c0450e8ed699e7775d7aa6d170553 to your computer and use it in GitHub Desktop.
Inline SVG with Nuxt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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' | |
| } | |
| }, | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| } | |
| }) | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <button> | |
| <svg-inline src="~/assets/svg/icon.svg"/> | |
| </button> | |
| </template> | |
| // Will render | |
| <button> | |
| <svg viewBox="..."> <!-- inline SVG code --> </svg> | |
| </button> |
Hey @rayfranco thanks for that gist, it works and is exactly what I needed
This doesn't seem to work with nuxt 2.0
Seems that transformToRequire is ignored
transformToRequire (now renamed to transformAssetUrls)
Does anyone have this error - Cannot read property 'attributes' of undefined const svg = document.getElementsByTagName('svg')[0]?
Coming from svg-inline.js? Paths are 100% correct. Nuxtjs 2
@olegnazarov23 were you able to fix that issue?
Does anyone have this error - Cannot read property 'attributes' of undefined
const svg = document.getElementsByTagName('svg')[0]?
Coming from svg-inline.js? Paths are 100% correct. Nuxtjs 2
I have the same problem!!
Anyone have find a solution? 😄
transformToRequire (now renamed to transformAssetUrls)
This resolve the problem but appear the problem with attribute
Did anyone find a solution to the attribute issue?
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks, I'll try this!