danielstgt / laravel-mix-svg-vue Goto Github PK

View Code? Open in Web Editor NEW

37.0 1.0 9.0 322 KB

A Laravel Mix extension to inline SVG files with Vue.js and automatically optimize them with SVGO

License: MIT License

JavaScript 100.00%

laravel-mix laravel-mix-plugin svg vue vuejs svgo laravel

laravel-mix-svg-vue's People

Contributors

Stargazers

Watchers

Forkers

eblumstengel kingsuok jeanchernandez luckyzeno dyn89 georgehanson davebeesley

laravel-mix-svg-vue's Issues

Vue 3 without options API

If we are using vue3 with the options api disabled, it doesn't work, as the mixins are for the old options api, which is a temporary transition between vue 2 and vue 3.

Issues with Laravel Mix 6.0.20 and above?

Hey,
After updating to Mix 6.0.20 I keep getting errors while the library is trying to process svg files :

Module build failed (from ./node_modules/img-loader/index.js): TypeError: Invalid host defined options at Object.module.exports (...\node_modules\img-loader\index.js:14:3)

It works fine when I revert back to Mix 6.0.19
Any ideas ? Thanks in advance!

Error: You may need an appropriate loader to handle this file type

I am getting this:

ERROR in ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" standalone="no"?>
| <!--
| Font Awesome Free 5.10.2 by @fontawesome - https://fontawesome.com
 @ ./node_modules/@fortawesome/fontawesome-free/css/all.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/@fortawesome/fontawesome-free/css/all.css) 7:77864-77905
 @ ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/assets/sass/app.scss
 @ ./resources/assets/sass/app.scss

My webpack.mix.js is:

mix.js("resources/assets/js/app.js", "public/js/app.js").svgVue({
    svgPath: 'resources/svg',
    extract: false
});

What I understand is, Webpack can't load Svg file. Do I need any loader for resolving this error?

Update svgo version by deprecated utility

Prevent from stripping svg attributes

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

How to use removeAttrs

I've attempted adding removeAttrs to my svgo settings, but I keep getting the following:

Warning: The plugin "removeAttrs" requires the "attrs" parameter.
It should have a pattern to remove, otherwise the plugin is a noop.
Config example:

plugins: [
  {
    name: "removeAttrs",
    params: {
      attrs: "(fill|stroke)"
    }
  }
]

Here is my call to svgVue:

    .svgVue({
        svgPath: 'resources/js/components/atomic/icons/',
        extract: false,
        svgoSettings: [
            { removeTitle: true },
            { removeViewBox: false },
            { removeDimensions: true },
            { removeUselessStrokeAndFill: true },
            { removeAttrs: { attrs: 'fill' } },
        ]
    })

Unique IDs

Is there a way to get the generated SVGs to have Unique IDs?

Right now it seems to generate IDs such as "a", "b", "c" etc which when having multiple SVGs on one page is causing issues.

It looks like perhaps this plugin would help, but i'm not sure how to integrate it with laravel-mix-svg-vue https://github.com/josephmcasey/sketch-plugin-svgo-unique-id

Handle style tags inside svg

Forgive me if this is a stupid question, but I'm trying to use an svg and mix is throwing errors because it includes style tags. Would it be sensible/possible to extract the style tags separately?

Incorrect icon displays with v-if, works correctly with v-show

Hi 👋

Thanks for the great library 😄

I'm running into an odd issue where the incorrect icon appears if I use v-if to render the parent element:

The correct icon displays as expected if I use v-show:

Here's my code, for what it's worth:

<button
    v-show="suggestion.is_archived"
    class="font-bold py-1 px-2 rounded text-xs bg-gray-200 hover:bg-gray-300 text-gray-600 hover:text-gray-800 space-x-2 flex items-center"
    name="restore-suggestion"
    title="Restore suggestion"
    type="button"
    :disabled="isSaving"
    @click.prevent="setIsArchived(false)">
    <svg-vue class="w-4" icon="restore-small"></svg-vue> <span>Restore</span>
</button>
<button
    v-show="!suggestion.is_archived"
    class="font-bold py-1 px-2 rounded text-xs bg-gray-200 hover:bg-gray-300 text-gray-600 hover:text-gray-800 space-x-2 flex items-center"
    name="archive-suggestion"
    title="Archive suggestion"
    type="button"
    :disabled="isSaving"
    @click.prevent="setIsArchived(true)">
    <svg-vue class="w-4" icon="archive-small"></svg-vue> <span>Archive</span>
</button>

Any ideas on how to track this down further?

Prevent from stripping viewBox

First of all thank you for providing this package !

However lately I find myself experiencing an issue with it.

The first one was when I tried to use npm update && npm run prod causing an Segmentation fault error.
So far I have found two ways to resolve this:

a) Downgrade or never update npm. Using npm v6 works just fine.
b) Update laravel-mix-svg-vue (from 0.2.7) to v0.3.4

Obvious the latter makes more sense but it causes a new problem, at least for me.
Everything works just fine, but all SVGs are stripped from their viewBox, which breaks my UI.

Changing options seems not work either. No matter if simply use

mix.svgVue()

mix.svgVue({
    svgPath: 'resources/svg',
    extract: false,
    svgoSettings: [
        { removeTitle: true },
        { removeViewBox: false },
        { removeDimensions: true }
    ]
})

I'm using:
npm 7.20.3
laravel-mix 6.0.18 or 6.0.27
vue 2.6.12
node: 15.14.0

Laravel Mix 6 + Vue 3 Support

Hello,

do you plan to support Laravel Mix 6 (with Webpack 5) and Vue 3 in the near future?

How to use with Jetstream(Inertia)

Hey,

I have this in app.js:

import SvgVue from 'svg-vue3';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin, SvgVue)
    .mount(el);

and the following in webpack.mix.js

require('laravel-mix-svg-vue');

mix.js('resources/js/app.js', 'public/js').vue().svgVue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

But when I use it as explained in the README, I get this: [Vue warn]: Failed to resolve component: svg-vue

Pretty sure I'm missing something small, but can't figure it out.