Skip to content

Instantly share code, notes, and snippets.

@imacrayon
Created Aug 25, 2019
Embed
What would you like to do?
Inline SVG Vue Component
<template>
<svg v-bind="attributes" v-html="html"></svg>
</template>
<script>
export default {
props: ['name'],
data: () => ({
attributes: {},
html: '',
}),
created() {
const div = document.createElement('div')
div.innerHTML = require('../../' + this.name + '.svg')
const fragment = document.createDocumentFragment()
fragment.appendChild(div)
const svg = fragment.querySelector('svg')
const attributes = Array.from(svg.attributes).reduce((attrs, attr) => {
attrs[attr.name] = attr.value
return attrs
}, {})
this.attributes = Object.assign(attributes, this.$attrs)
this.html = svg.innerHTML
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment