Laravel-mix: SVGs Not Loading / vue-svg-loader

[nathanaelphilip]

• 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!

[nathanaelphilip]

removing svg from the font test “fixes” the issue. is there a way to exclude a specific path in that rule?

[rderimay]

Same problem here when wanting to add this tho the webpackConfig.rules:

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

The default |svg| loader in mix will take precedence.

[JeffreyWay]

Yeah, hmm... I need to figure out what we should do here. So...

1. We want SVGs to go to an /images folder.
2. But if the SVG is a font, it should go to the /fonts folder.

I'm not sure how we do that. Ideas?

[JeffreyWay]

One option, I suppose, is to just defer to the folder name of the resource.

{
    test: /\.(png|jpg|gif|woff2?|ttf|eot|svg|otf)$/,
    loader: 'file-loader',
    options: {
        name: '[folder]/[name].[ext]?[hash]',
        publicPath: Mix.resourceRoot
    }
},

[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.)

[rderimay]

Did someone eventually had the time to look at this? Not being able to (or maybe just not being able to know how to) use svg sprites is quite a limitation.

[ghosh]

Since this issue is closed, is there a solution this?

@nathanaelphilip Did you find a way around this. I understand, why removing the svg from the file-loader test works, but where do you make this change?

The only place I could change it was directly in the node_modules folder. That's just a nasty hack, is there a better way. Thanks.

[mattkoch614]

@ghosh I think where you've modified it seems to be the solution for now (or you can copy it into your project root - see https://laravel.com/docs/5.5/mix#custom-webpack-configuration - Custom Configuration Files)

[novalevel]

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

[c-zab]

Hey! Try to use laravel-mix-svg-vue for SVG files, it works like a charm