Prevent from stripping svg attributes about laravel-mix-svg-vue HOT 2 CLOSED

tl;dr

Upgrade your Laravel Mix SVG Vue Version:

# npm
npm install laravel-mix-svg-vue@^0.4.1

# yarn
yarn add laravel-mix-svg-vue@^0.4.1

Enable removeViewBox and disable removeDimensions in the SVGO settings, e.g.:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .svgVue({
        svgoSettings: [
            { removeViewBox: true },
            { removeDimensions: false }
        ]
    });

Explanation

Older versions of this plugin only respected the viewBox attribute of the SVGO generated string. I'm actually surprised that this wasn't mentioned before, could be because viewBox is mainly prefered over the width/height attributes. Besides this plugin, SVGO also has this option enabled as default setting.

New versions of the svg-vue and svg-vue3 components have been released that include every attribute that SVGO generates as optimized version.

Based on your SVGO settings, you have to enable or disable the removeViewBox or removeDimensions to get either the viewBox or width/height attributes. That means you have to use the following settings to keep the width and height attributes:

.svgVue({
    svgoSettings: [
        { removeViewBox: true },
        { removeDimensions: false }
    ]
})

You can check the defaults of SVGO here: SVGO Bult-in plugins

I've tagged a new version of Laravel Mix SVG Vue which includes the new Vue.js components. Upgrading to laravel-mix-svg-vue@^0.4.1 should fix your issues.

Let me know if the new version produces the desired output of the svg.

from laravel-mix-svg-vue.

Perfect! Thanks so much for fixing this issue.

The new version produces exactly the desired output from all of my svgs. :)

from laravel-mix-svg-vue.