SVG Icon Vue Component

SvgIcon.vue

<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') ]
  }
});

This is a pretty amazing idea, the main draw back is that it now adds the entire icon set that I'm using to app.js, instead of extracting the data from the specific file. So remember to either make a stripped down version of only the icons that you need.

1. Install the html-loader package

npm i -D html-loader

2. Add this to your webpack.mix.js (no other configuration is needed):

mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/'),
        },
    },
});

3. You can now do this:

<template>
    <div v-html="require(`!!html-loader!@/svg/${icon}.svg`)" v-once></div>
</template>

<script>
    export default {
        props: {
            name: {
                default: '',
                type: String,
            },
        },
        mounted() {
            this.$el.firstChild.classList.add(...this.$el.className.split(' '));
            this.$el.outerHTML = this.$el.innerHTML;
        },
    }
</script>

Thanks for all the examples! Based on these, I came up with a mix of some proposals:

npm i -D html-loader

Also ensure you have the path set up correctly in webpack.config.js or just use a relative import.

<template>
    <div
        v-html="require(`!!html-loader!@Icons/${name}.svg`)" class="svg-icon"
        v-once
        role="img"
    ></div>
</template>

<script>
    export default {
        props: {
            name: {
                default: '',
                type: String,
                required: true,
            },
        },

        mounted() {
            this.$el.firstChild.removeAttribute('width')
            this.$el.firstChild.removeAttribute('height')

            // Reassign class list and remove the div wrapper
            this.$el.firstChild.classList.add(...this.$el.className.split(' '))
            this.$el.outerHTML = this.$el.innerHTML
        },
    }
</script>

<style module>
    .svg-icon {
        height: 1em;
        margin-top: -4px;
        vertical-align: middle;
        width: 1em;
    }
</style>

Unfortunately, none of the examples worked for me as provided. Here's the solution I ended up with:

1. Install html-loader:
   npm i -D html-loader

2. Update webpack.mix:

var path = require('path');

mix.alias({
    '@icons': path.resolve(__dirname, 'resources/assets/svg/'),
});

3. Create SvgIcon.vue component:

<template>
    <div
        v-html="require(`!!html-loader!@icons/${name}.svg`).default" 
        class="fill-current"
        v-once
    ></div>
</template>

<script>
    export default {
        props: {
            name: {
                default: '',
                type: String,
                required: true,
            },
        },

        mounted() {
            this.$el.firstChild.removeAttribute('width')
            this.$el.firstChild.removeAttribute('height')

            // Reassign class list and remove the div wrapper
            this.$el.firstChild.classList.add(...this.$el.className.split(' '))
            this.$el.outerHTML = this.$el.innerHTML
        },
    }
</script>