SVGs Not Loading / vue-svg-loader

• Laravel Mix Version: 0.7.2
• Node Version (node -v): 7.2.0
• NPM Version (npm -v): 4.1.1
• OS: OS Sierra

Description:

SVGs are getting dumped into the fonts folder. I’m using the vue-svg-loader package, and have this rule applied:

{
test: /\.svg$/,
loader: 'vue-svg-loader'
},

in my modules I’m using this: import IconCalendar from '../../../svg/menu circle grid.svg';

error:

[Vue warn]: Invalid Component definition: /fonts/menu circle grid.svg?3644f1f735844b4b08228cc5b11a4534 
(found in component <hey-select> at /Users/nathanaelmoody/Sites/heystack-app/assets/js/components/inputs/Select.vue)

Steps To Reproduce:

1. install this: https://github.com/visualfanatic/vue-svg-loader
2. add the rule
3. try to reference an svg file

Side Question: is there a way to reference everything from the project root? So I don’t have to keep doing ../../../.

Thanks!

[rderimay]

Yes that would be fine, but we also want to be able to overwrite the standard loader/configs for a particular type of file. For example, I would like to use this for icon SVGs (not for font SVGs of course…):

{
	test: /\.svg$/,
	loaders: ['svg-sprite-loader?' + JSON.stringify({
		name: '[name]_[hash]',
		prefixize: true
		})]
}

Will you proposal be able to handle that as well? (Maybe it is already possible, but it seems that the standard mix webpack config is taking precedence over the webpackConfig.rules that I am writing.)

[novalevel]

I work this use inline:require.context(‘!svg-sprite-loader?{“symbolId”:“icon-[name]”}!./svg’, false, /.svg$/);