Laravel-mix: Why do SVG images compile into the fonts folder?

[Spazer9]

I'm wondering why this behavior happens and how to override it?

Regular images (png, jpg) go into the correct images folder. but SVG's all go to the fonts folder.

My css:

.foo{ background: url(../images/normal_icon.png) }
.bar{ background: url(../images/icon.svg) }

Converts to:

.foo { background: url(/image/normal_icon.png?id=a72845c0a452ccc7003a) }
.bar { background: url(/fonts/icon.svg?id=085742210e6d227f68b0) }`
````

My mix file is:

const { mix } = require('laravel-mix')

mix.setPublicPath('public')
.js('app/Assets/js/app.js', 'js')
.sass('app/Assets/css/test.scss', 'css')
.copy('app/assets/images', 'public/images', false)
.version()
.version('public/images/*/')
.disableNotifications();
```

[ruchern-chong]

Related issue #214

[stephan-v]

Time to grab a bucket of popcorn until this finally gets resolved.

[ruchern-chong]

@stephan-v Haha, yeah. I guess this is becoming a thing and your PR should be a good fix to this.

[Mdejonge]

I had the same problem, but finally fixed it. You are using ../images/normal_icon.png as path. Try removing the dots at the beginning of the path, so it looks like this: /images/normal_icon.png.
For some reason it will compile all the paths with ../ to the fonts folder.

[giovannipds]

@Mdejonge I wouldn't say that's a "solution", it affects how we read and write url paths. BUT, it was important that you've mentioned.

A solution would be a PR changing the webpack config. =)

[webcoderkz]

Any news on this?

[stephan-v]

@heihachi88

I had a simple fix for this but it go closed.

https://github.com/JeffreyWay/laravel-mix/pull/672

I simply can not see why this would not go through now, since there is an overwhelming response to drop SVG's from being seen as fonts.

[adriandmitroca]

FYI: SVG fonts are deprecated and useless anyway, really don't see any point of having this -
https://caniuse.com/#feat=svg-fonts

In fact, it would be nice to have SVGs moved into some other place than just images directory, like vectors, or something that can be configured by modifying the variable.

@JeffreyWay

[stephan-v]

@adriandmitroca

I would either like to see it removed or receive a better explanation from @JeffreyWay than:

"This would break everything though."

Because this is not true at all. Maybe for this personal project though...

[ruchern-chong]

@adriandmitroca The issue now lies with Font Awesome and other fonts provider. They have to start removing SVGs from their fonts.

Looking into font-awesome v5 milestone, it does not seem like they are working on it.

[stephan-v]

I still feel that If you want to use font-awesome and svg fonts, it should be your job to opt in for it and you should override the default instead.

Instead of it being the other way around where we need to override the webpack config for regular usage of svg files.

[ruchern-chong]

@stephan-v What if I have both, recently I have been using more SVG images than Font Awesome. It's really hard to get the best of both worlds working, but I believe that SVG images should be the one taking the higher priority.

[reblim]

@stephan-v Use absolute urls/paths? 🤔

[JeffreyWay]

Fixed in #1367.