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

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>