Prevent from stripping svg attributes

[o1y]

Hey! Thanks for this helpful package. :)

When using the <svg-vue /> (Vue 2) component to inline an svg all existing svg attributes are stripped and non existing attributes are added to the output. I'm not using any svgVue options.

myComponent.vue

<svg-vue icon="ui-feedback-success-icon"></svg-vue>

ui-feedback-success-icon.svg

<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9 12 2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="#34D399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

Output

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"><path d="m9 12 2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="#34D399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>

• viewBox was non existent in source svg.
• width, height attrs are missing.
• fill attr is missing.

This is the result I'm expecting (default output from svgo):

<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9 12 2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="#34D399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

---

• laravel-mix 6.0.27
• vue 2.6.12

[danielstgt]

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.

[o1y]

Perfect! Thanks so much for fixing this issue.

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