laravel-mix: copied svg asset broken

Lmao here we go again. I have already made a issue about this previously but I guess we will just wait for more issues to coming flowing in. I find it absurd that all svg’s are treated as fonts per default.

It seems that starting with laravel-mix v1.4.3 we can manipulate the webpack config before its handed over for processing.

So in the meantime something like this is possible:

Mix.listen('configReady', (webpackConfig) => {

    // Add "svg" to image loader test
    let imageLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/\.(png|jpe?g|gif)$/));

    imageLoaderConfig.test =  /\.(png|jpe?g|gif|svg)$/;
    imageLoaderConfig.exclude = /(fonts)/;

    // Exclude 'img' folder from font loader
    let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/\.(woff2?|ttf|eot|svg|otf)$/))

    fontLoaderConfig.exclude = /(assets\/img)/;

})

I’m bothered too by the default behavior of Laravel Mix with SVG : putting them all in a fonts directory. I can’t find a good way to handle this issue, using mix.webpackConfig and the “smart” merging of config file lead to more issues, disabling processCssUrls or using absolute path cut some useful features.

SVG is mainly an image type not a font, and by the way SVG fonts support is quite anecdotal and will tend to disappear : “Removed from SVG 2.0 and considered as a deprecated feature with support being removed from browsers.” (http://caniuse.com/#feat=svg-fonts)…

Same thing here, mix is wrongly copying all svgs to the fonts folder, which is not the case all times (not every scalable vector graphic is a font, some of them can be just images). A way to reproduce my error case:

webpack.mix.js (default):

let mix = require('laravel-mix');
mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')

app.scss:

.test1 {
    /* wrongly copies to /fonts/anything.svg, it should have copied to /images/ */
    background-image: url(../images/anything.svg);
}
.test2 {
    /* does not copy at all: */
    background-image: url(/images/anything.svg);
}

/* copies nicely to /fonts/: */
@font-face {
    font-family: 'My Font Family';
    src: url('../fonts/MyFontFamily.eot');
    src: local('Baskerville Old Face'), local('MyFontFamily'),
         url('../fonts/MyFontFamily.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MyFontFamily.woff2') format('woff2'),
         url('../fonts/MyFontFamily.woff') format('woff'),
         url('../fonts/MyFontFamily.ttf') format('truetype'),
         url('../fonts/MyFontFamily.svg#MyFontFamily') format('svg');
    font-weight: normal;
    font-style: normal;
}

Fixed in #1367.

It is not a proper solution I am afraid.

The suggestion goes beyond laravel mix. If you’re using any library written by someone else, who pours their life into helping a community, and you feel like a hostage; run. Get as far away as possible.

This is about common sense. Saying “the package isn’t for you” is simply dismissive.

I have solved my problems and I am not here to argue about those, I am just sick and tired of seeing a community agreeing on a topic and not being heard.

But we all know what this boils down to. Jeffrey Way simply uses SVG’s as fonts and therefore this will not be changed.

Or we could just not shoot ourselves in the foot and treat SVG’s like images per default, since that is how the majority uses them.

I can’t believe this is still even something that should be discussed but ok, that is the hazard you get when you let a single developer take a community hostage.

It is a simple fix and it should be simple to fix. This should be fixed here however and not force a user to create a custom webpack configuration file themselves based on nothing more than an wrong assumption on how people will use this.

Found a possible solution. Commented in the related issue #1231.

I think we van all agree that most people seem to use them as images instead of fonts especially judging by the amount of issues already raised about this so far.

But yes if you want to know the truth you should have a poll which I guess will turn out about 95-5.

@JeffreyWay oh, it’s just that mix assumes always the fonts folder, but in the case of flag-icon-css, the svg files are in a folder called flags. I would want that mix would respect that file structure / give an option to disable automatic copying, so I can do it manually with mix.copy() and but it in a different folder than public/fonts.

Way to handle this.

That’s low. If having to add a few lines to your code to make a package work how you want, is holding you hostage, then maybe the package isn’t for you. Just use webpack and then you can configure every single detail exactly how you want.

So can we expect to see the default behaviour changed as @giovannipds has suggested?

@xsindesign well pointed. =)

@stephan-v I’m not suggesting to create a custom webpack config, I was just trying to help finding a way to fix it. =)

Isn’t this just simple changes on webpack.config.js? Like so (from line 162 to 206):

{
    test: /\.(png|jpe?g|gif|svg)$/, // add svg here
    exclude: /(fonts)/, // added
    loaders: [
        {
            loader: 'file-loader',
            options: {
                name: path => {
                    if (! /node_modules|bower_components/.test(path)) {
                        return 'images/[name].[ext]?[hash]';
                    }

                    return 'images/vendor/' + path
                        .replace(/\\/g, '/')
                        .replace(
                            /((.*(node_modules|bower_components))|images|image|img|assets)\//g, ''
                        ) + '?[hash]';
                },
                publicPath: Mix.options.resourceRoot
            }
        },
        {
            loader: 'img-loader',
            options: Mix.options.imgLoaderOptions
        }
    ]
},

{
    test: /\.(woff2?|ttf|eot|svg|otf)$/,
    loader: 'file-loader',
    exclude: /(images)/, // added
    options: {
        name: path => {
            if (! /node_modules|bower_components/.test(path)) {
                return 'fonts/[name].[ext]?[hash]';
            }

            return 'fonts/vendor/' + path
                .replace(/\\/g, '/')
                .replace(
                    /((.*(node_modules|bower_components))|fonts|font|assets)\//g, ''
                ) + '?[hash]';
        },
        publicPath: Mix.options.resourceRoot
    }
},

I am having the same issue. Copied SVGs are broken. Here is my mix file:

mix.copy('node_modules/summernote/dist/font', 'public/fonts');
mix.copy('resources/assets/fonts/roboto', 'public/fonts');
mix.copy('node_modules/summernote/dist/summernote.min.js', 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/js/app.js', 'public/js');
mix.version();

Also: I am just compiling the sass for flag-icon-css, but for some reason all svgs are getting copied automatically to public/fonts? This wasn’t the case with elixir.