Skip to content

Instantly share code, notes, and snippets.

@gshzn

gshzn/Icon.vue

Last active May 5, 2020 12:49
Show Gist options
  • Save gshzn/6189dd470a25990c1072af8d23f21ea0 to your computer and use it in GitHub Desktop.
Save gshzn/6189dd470a25990c1072af8d23f21ea0 to your computer and use it in GitHub Desktop.
Download ZIP
Vue component for loading svg's
Raw
Icon.vue
<template>
<span v-html="svg" class="cursor-pointer" @click="$emit('click')"></span>
</template>
<script>
export default {
name: "Icon",
props: ['id', 'fill', 'height', 'width', 'className'],
computed: {
svg() {
return require(`../icons/${this.id}.svg`);
}
},
mounted() {
try {
if (this.fill) this.$el.firstChild.setAttribute('fill', this.fill);
if (this.width) this.$el.firstChild.setAttribute('width', this.width);
if (this.height) this.$el.firstChild.setAttribute('height', this.height);
if (this.className) this.$el.firstChild.setAttribute('class', this.$el.firstChild.getAttribute('class') + ' ' + this.className);
} catch (e) {
}
}
};
</script>
@gshzn
Copy link
Author

gshzn commented May 5, 2020 

mix.override(config => {
    config.module.rules.find(rule => rule.test.test('.svg')).exclude = /\.svg$/;

    config.module.rules.push({
        test: /\.svg$/,
        use: [{ loader: 'html-loader' }]
    })
});

Add above to webpack.mix.js!

@gshzn
Copy link
Author

gshzn commented May 5, 2020

Make sure to alter the require path as well!

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