Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
class Svg {
constructor(name) {
let div = document.createElement('div');
div.innerHTML = require('../../../../public/img/svg/' + name + '.svg'); // change to wherever your svg files are
let fragment = document.createDocumentFragment();
fragment.appendChild(div);
this.svg = fragment.querySelector('svg');
}
classes(classes) {
if (classes) {
this.svg.classList = '';
classes.split(' ').forEach(className => {
this.svg.classList.add(className);
});
}
return this;
}
width(width) {
if (width) {
this.svg.setAttribute('width', width);
}
return this;
}
height(height) {
if (height) {
this.svg.setAttribute('height', height);
}
return this;
}
toString() {
return this.svg.outerHTML;
}
}
export default {
props: ['name', 'classes', 'width', 'height'],
render(h) {
return h('div', {
domProps: {
classList: 'flex items-center',
innerHTML: new Svg(this.name)
.classes(this.classes)
.width(this.width)
.height(this.height)
}
});
}
};
@randy-allen

This comment has been minimized.

Copy link
Owner Author

@randy-allen randy-allen commented Aug 1, 2019

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