Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
SVG Icon Vue Component
<template>
<div class="inline-block" v-html="require('icon-' + this.icon + '.svg')"></div>
</template>
<style module>
.svg {
fill: currentColor;
height: 1em;
margin-top: -4px;
vertical-align: middle;
width: 1em;
}
</style>
<script>
export default {
props: ['icon'],
mounted() {
this.$el.firstChild.classList.add(this.$style.svg)
this.$el.firstChild.removeAttribute('height')
this.$el.firstChild.removeAttribute('width')
}
}
</script>
// Here is the custom code for my webpack.mix.js file:
// Exclude svg icons
Mix.listen('configReady', function (config) {
const rules = config.module.rules;
const targetRegex = /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/;
for (let rule of rules) {
if (rule.test.toString() == targetRegex.toString()) {
rule.exclude = /\.svg$/;
break;
}
}
});
// Use a custom loader for inline icons
mix.webpackConfig({
module: {
rules: [{
test: /\.svg$/,
use: [{
loader: 'html-loader',
options: {
minimize: true
}
}]
}]
},
resolve: {
modules: [ path.resolve(__dirname, 'resources/assets/svg') ]
}
});
@fgilio

This comment has been minimized.

Show comment Hide comment
@fgilio

fgilio Feb 25, 2018

Awesome, thanks!
The link to the post in case someone finds this first: http://calebporzio.com/using-inline-svgs-in-vue-compoments/

fgilio commented Feb 25, 2018

Awesome, thanks!
The link to the post in case someone finds this first: http://calebporzio.com/using-inline-svgs-in-vue-compoments/

@beijer

This comment has been minimized.

Show comment Hide comment
@beijer

beijer Apr 14, 2018

Awesome!

A tip though, if you change your require to require('!!html-loader!./../../svg/' + this.icon + '.svg') (notice the !! in the beggining) then you can skip the whole webpack configuration.

beijer commented Apr 14, 2018

Awesome!

A tip though, if you change your require to require('!!html-loader!./../../svg/' + this.icon + '.svg') (notice the !! in the beggining) then you can skip the whole webpack configuration.

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