Skip to content

Instantly share code, notes, and snippets.

@danielstgt
Created February 23, 2023 10:24
Show Gist options
  • Save danielstgt/ff336eb30982b947dd36fd6c2217d7fa to your computer and use it in GitHub Desktop.
Save danielstgt/ff336eb30982b947dd36fd6c2217d7fa to your computer and use it in GitHub Desktop.
<template>
<svg
v-bind="svgAttributes"
v-html="svgContent"
>
</svg>
</template>
<script>
export default {
props: ['icon'],
data() {
return {
svgMap: import.meta.glob('/resources/svg/**/*.svg', { as: 'raw', eager: true }),
}
},
computed: {
iconPath: {
cache: false,
get() {
return this.icon.replace(new RegExp('.'.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), '/');
},
},
svgString() {
return this.svgMap['/resources/svg/' + this.iconPath + '.svg']
},
svgAttributes() {
if (! this.svgString) return {};
let wrapper = document.createElement('div');
wrapper.innerHTML = this.svgString;
let attributesList = wrapper.firstElementChild.attributes;
let attributes = {};
Object.keys(attributesList).map(i => attributes[attributesList[i].name] = attributesList[i].value);
return attributes;
},
svgContent() {
return this.svgString ? this.svgString.replace(/^<svg[^>]*>|<\/svg>$/g, '') : null;
},
},
}
</script>
@danielstgt
Copy link
Author

app.js

// ...

import SvgVue from '@/Components/SvgVue.vue';

// ...

Vue.component('svg-vue', SvgVue);

// ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment