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> |
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
I have the same problem!!
Anyone have find a solution? 😄