oliverfindl / vue-svg-inline-loader Goto Github PK

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

License: MIT License

JavaScript 100.00%

gridsome inline javascript laravel-mix loader nuxt nuxtjs quasar quasar-framework sprites svg svgo symbols vue vue-cli vue-svg-inline-loder vuejs webpack webpack-loader

vue-svg-inline-loader's People

Contributors

Stargazers

Watchers

Forkers

mkondur kaipaysen kimla beltranrengifo semyons wearegoose ahielanravichandran mesqueeb hooktstudios ajitae dermart u1-liquid jmk1ng yerlinmatu dieetplaneet chen-chun-hao yenh-cs levi-lesches

vue-svg-inline-loader's Issues

Loading SVG from Alias Path not working

Hi there,

I just ran into this issue: while loading SVGs from relative paths "just works", it doesn't when using an alias path. This is my webpack config:

module: {
        rules: [
// ..                
            {
                test: /\.vue$/,
                use: [
                    'vue-loader', {
                    loader: "vue-svg-inline-loader",
                    options: {}
                }]
            },
        ]
    },

resolve: {
// ...
        alias: {
// ...
            "resources":    path.resolve(__dirname, "src/resources"),
// ...
        }
    },

And in one VUE single file component I'm using the following two. The latter is not working.

<img svg-inline class="icon" src="../../../resources/icons/baseline-equalizer-24px.svg" alt="example" />
<img svg-inline class="icon" src="~resources/icons/baseline-equalizer-24px.svg" alt="example" />

build fail on node.js version 6

Thank you making this amazing loader. But I met some issue on this loader.

Because async syntax does not be handled by node.js 6, the build failed.

vue-svg-inline-loader/src/index.js

Line 132 in cba5907

replace(content, PATTERN_IMAGE_SRC_SVG, async (image, source) => {

I think it should be transpiler to es5 for older node version.

Any idea?

Thanks again.

Plugin remove SVG with defs / linearGradient

Hi. I use your plugin and found next bug:
In component use <img svg-inline svg-sprite src="home-arrow-down.svg" alt=""> and this svg file https://prnt.sc/oz801c.
In output we get svg without defs area (and without linearGradient)

src binding not finding svg file

Hello there, I'm not sure if this is an issue with the loader or merely a lack of my understanding. It appears that when I attempt to dynamically load an SVG using the v-bind:src approach on the image tag, the loader cannot find it.

Loading SVG from src path

<img svg-inline :src="`../../static/images/icon-${game.name}.svg`" />

If I write it in normally src="../../static/images/icon-basketball.svg" it works.

Loading SVG from build path
I've also tried this:

<img svg-inline :src="`/images/icon-${game.name}.svg`" />

But it ends up just loading up an image tag with the SVG as it's src instead of inlining the SVG.

Any ideas?

Duplicate attribute: class

When the SVG contains a 'class' attribute, the 'class' attribute got duplicated when we specify additional classes in the tag:

For example:

<img svg-inline class="svg-icon icon" src="eye.svg" alt="Watch" />

Generates:

<svg class="eye icon-eye" svg-inline="" class="svg-icon icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="presentation" focusable="false" tabindex="-1"><circle cx="12" cy="12" r="3"/>...

The classes 'eye' and 'icon-eye' are embedded in the SVG.

The compilation fails in this case

Create a Nuxt Module export

Hi,
I love this plugin, I currently use it in every Nuxt project I start.
But I have to use the extends key inside nuxt.config.js and copy/paster my config everytime.
I was wondering if it would be possible to add a Nuxt Module export (Something like: vue-svg-inline-loader/nuxt) so it could work seamlessly with Nuxt.

can't work when using `lang=pug`

Hello fellow developers, this is so lovely plugin for me.

I want to use in <temaplte lang="pug"> and img(svg-inline class="icon" src="@/assets/logo-default.svg" alt="alt"), but it's not work.

Thanks.

Other options to use this plugin

Can you use this when loading an image in via a data return like below?

data() {
        return {
            lightSwitchTickIcon: require('../../images/svgs/toggle-switch-tick.svg'),
        }
},

<span v-html="lightSwitchTickIcon"></span>

Not working with Nuxt dynamic image

Right now when I implement it with the src being dynamic it wont work:

in vue:

<li
                            class="w-1/5 hover:opacity-50"
                            v-for="(item, index) in  $store.state.socialMenu"
                            v-bind:key="index"
                        >
                            <a :href="item.link" class="mr-4 link" target="_blank">
                                <img
                                    svg-inline
                                    class="icon"
                                    :src="require('~/assets/svg/'+item.icon+'.svg')"
                                    :alt="item.name"
                                />
                            </a>
                        </li>

What is rendered for the image:

<img svg-inline="" src="/_nuxt/assets/svg/facebook.svg" alt="Facebook" class="icon">
If I hard code in the src like src="~/assets/svg/facebook.svg" it will work fine but I need to load the images in a loop.

Pug template

I think the basic usage it's not working with Pug templates. Am I right?

img.suites__logo( src="@/assets/images/header/onesait-brand-logo.svg" svg-inline)

<img svg-inline src="@/assets/images/header/onesait-brand-logo.svg" alt="">

Thank you!

@click.native and @click.stop is not working

@click.native is not working and thus @click.native.stop is also not working.

Overwriting the addAttributes option does not remove default attributes

Steps to reproduce:

Added the following to vue.config.js:

config.module
      .rule('vue')
      .use('vue-svg-inline-loader')
      .loader('vue-svg-inline-loader')
      .options({
        addAttributes: {
          role: 'presentation',
        },
      });

Expected the resulting HTML to contain this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" svg-inline="" role="presentation">

Instead this was the resulting SVG element:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" svg-inline="" role="presentation" focusable="false" tabindex="-1">

The only way that I found to actually remove default attributes was to utilize removeAttributes. If I supply an alternative value for a default attribute, then the attribute's value is updated, but the only way to remove is via removeAttributes.

It is preferable for the default addAttributes options not to be added if an alternative object is supplied.

defs id's get replaced & scrambled

I have a problem that when I use this plugin all the defs variable ids all get minified to things like a, b, c, ... and this is the same for every svg on the page. This is causing problems that wrong variables are used since they all overlap now.

Is there any way to prevent this from happening?

Replacing with commented JS?

I'm using Laravel Mix and merged the webpack config example with it... I got it to replace the img but it's a line of javascript that's commented out...

Logo.vue:

<template>
    <img svg-inline src="imgs/logo-black.svg" class="fill-current text-red-500">
</template>

Laravel Mix Config:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/imgs', 'public/imgs')
    .options({
        processCssUrls: false,
        postCss : [
            tailwindcss('resources/sass/tailwind.config.js'),
            discardComments({removeAll: true}),
        ],
    })
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: [
                        {
                            loader: 'vue-loader',
                        },
                        {
                            loader: 'vue-svg-inline-loader',
                        }
                    ]
                }
            ]
        }
    });

What it's injecting into my HTML:

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Any ideas what I may have done wrong?

Passing SVG as a prop

I'm passing an imported SVG as a prop to my component. However my component is just rendering the <img /> tag rather than converting to a SVG.

Parent component

<template>
  <div>
    <child-component :svg="SVG" />
  </div>
</template>
<script>
  import SVG from '@/assets/svgs/my-svg.svg';
  export default {
    data: () => ({
       SVG
    })
  }
</script>

Child component

<template>
  <div>
    <img svg-inline :src="parentSVG" /> 
  </div>
</template>
<script>
  export default {
      props: {
        type: String,
        required: true,
      }
  }
</script>

Renders as

<img svg-inline="" src="/_nuxt/assets/svgs/my-svg.svg">

I'm using the standard nuxt config.

Package causes failing tests

I've recently released a query builder library and I'm using this package for inlining one svg file.
It works fine, however while preparing documentation and Travis CI, I've noticed that since I've added the package, all tests are failing with the error message:

● Test suite failed to run

Cannot find module '/home/rtucek/projects/query-builder/node_modules/@vue/babel-preset-app/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'QueryBuilder.vue'

I've been able to bisect the error to this commit (rtucek/vue-query-builder@bc037c1) - which is where I added this package.

Adding custom attr to replaced svg

Hi,
It would be nice if we could add our own custom attrs to the SVG that is replaced via the config.
For example, we have an issue in IE11 where we need to add tabindex ="-1" and focusable="false"

Some SVG doesn't work others yes

I'm trying to add new icons but these don't work
the old ones work normally

old SVG

<svg id="shopping-cart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M24.17 26.86a4.03 4.03 0 1 1 4.03-4.02 4.03 4.03 0 0 1-4.03 4.02zm0-5.37a1.34 1.34 0 1 0 1.35 1.35 1.34 1.34 0 0 0-1.35-1.35zM12.09 26.86a4.03 4.03 0 1 1 4.03-4.02 4.03 4.03 0 0 1-4.03 4.02zm0-5.37a1.34 1.34 0 1 0 1.34 1.35 1.34 1.34 0 0 0-1.34-1.35z"/><path d="M9.4 4.03l.67 2.68H28.4l-2.57 9.4H10.45L6.93 2.05A2.68 2.68 0 0 0 4.33 0H1.33a1.34 1.34 0 0 0 0 2.69h2.98l3.52 14.08a2.69 2.69 0 0 0 2.6 2.03h15.4a2.69 2.69 0 0 0 2.58-1.98l3.5-12.8z"/>
</svg>

new SVG

error in build

ERROR in ./Assets/js/Components/Header/Menu/menuConversion.vue?vue&type=template&id=766d3104& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/src!./Assets/js/Components/Header/Menu/menuConversion.vue?vue&type=template&id=766d3104&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

v1.3.0 introduced some breaking changes regarding attribute usage

Prior to v1.3.0 you could use any atributes in the <img> tag declaration and these would be preserved during the <svg> transformation. 😢

Now all attributes are being removed in favor of the new addAttributes option. This is a problem if you've had different attributes values and properties per icon.

There is also another breaking change that class values are being transformed to lowercase, and since CSS is case-sensitive this break any icon that use a style name such as class="fooBar".

Embedding doesn't work

config/webpack/loaders/vue.js:

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [
    {
      loader: 'vue-loader',
      options: {
        compilerOptions: {
          whitespace: 'condense'
        }
      }
    },

    {
      loader: 'vue-svg-inline-loader',
      options: {
        inline: {
          keyword: 'svg-inline',
          strict: true
        }
      }
    }
  ]
}

Vue component:

<template>
  <img svg-inline :src="path" />
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },

  computed: {
    path() {
      return require(`@images/icons/${this.name}.svg`)
    }
  }
}
</script>

Result:

<img svg-inline="" src="/packs/media/images/icons/dog-foe3f829e55a0c71152f203a9660dsb3.svg">

Why is embedding not working? I see the image, but this is not an inline svg.

Plan to support Vite (Vue 3) or Webpack 5 ?

Hi,
Any plan to support Vue 3 and Vite ?
I know you recommend using vue-svg-inline-plugin in the README, but that package is quite different.
With the recommended package, I have to import the SVG in the <script>, define it as a component in the option API or use defineComponent in setup and then use it as a Vue component in the <template>.
I liked this plugin because it still used plain <img /> tag instead of Vue component, and I could use the SVG directly instead of have to do 2 prior step every time (import, define component).

All svg images replaced to inline

all images even without 'svg-inline' attribute are replaced to inline svg because options.strict equals undefined, it should be options.inlineStrict in this condition:

if(options.strict && !PATTERN_INLINE_KEYWORD.test(image)) { return image; }

Nuxt config not working

Get the error below:

   │   Error: Cannot find module 'vue-svg-inline-loader/nuxt'                                           │

I think its because in your packages.json you have not included the nuxt folder in the files so it doesn't come down when you install via npm.

Add accessibility tags and attributes

As shown here.

alt attribute should be translated into a <title> tag into the SVG (support is very good)
role="img" should be added

Why is it remove viewBox attribute?

I added inline svg file.

SVG source:

<svg width="33px" height="31px" viewBox="0 0 33 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Home</title>....

Add code

<img svg-inline class="icon" src="../assets/icons/home.svg" />

after render

<svg svg-inline="" role="presentation" focusable="false" width="33" height="31" xmlns="http://www.w3.org/2000/svg" class="icon">

I don't resize SVG with CSS due to remove viewbox attribute

removing tabindex, role etc.

I feel like I'm going insane but I can't figure out how to remove tabindex etc.

also, src is not being removed either

this is my config for gridsome:

chainWebpack(config) {
    config.module
      .rule('vue')
      .use('vue-svg-inline-loader')
      .loader('vue-svg-inline-loader')
      .options({
        removeAttributes: ['width', 'height', 'alt', 'src'],
        addAttributes: {
          focusable: false,
        },
      });
}

blockType conflict

I'm having an issue running development mode. I have recently added Vue Styleguidist to my project and I use <docs> tag in my .vue components. Everything works as expected when I build a styleguide, but when I try running development then my build fails.

Now I have been poking at this and it seems that this loader is the issue, when I remove it then the build succeeds

in ./src/common/Forms/InputField.vue?vue&type=custom&index=0&blockType=docs

Module parse failed: Unexpected token (113:3)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
 * ./node_modules/vue-svg-inline-loader/dist/index.min.js
You may need an additional loader to handle the result of these loaders.
|
|
> My docs
|

Overwrite problem with the same name style .

I really want to know how this plugin handles the style attribute in two SVG icons, including the class with the same name .
for example :
svg-1: { .class-one }
svg-2: { .class-one }

core-js issue after gridsome upgrade

Thank for this cool package!

I just upgraded my gridsome app and it now fails to compile (using yarn) with the following errors

ERROR  Failed to compile with 67 errors                                                                                                                                                                   6:27:45 PM

These dependencies were not found:

* core-js/modules/es.array.concat in ./node_modules/gridsome/app/fetch.js, ./node_modules/gridsome/app/head.js and 2 others
* core-js/modules/es.array.for-each in ./node_modules/gridsome/app/head.js, ./node_modules/gridsome/app/directives/image.js and 2 others
* core-js/modules/es.array.from in ./node_modules/gridsome/app/directives/image.js, ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.array.index-of in ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.array.is-array in ./node_modules/gridsome/app/router.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.array.join in ./node_modules/gridsome/app/components/Image.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.array.map in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/router.js and 2 others
* core-js/modules/es.array.reduce in ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.array.slice in ./node_modules/gridsome/app/components/Image.js, ./node_modules/gridsome/app/utils/helpers.js and 1 other
* core-js/modules/es.date.to-string in ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/layouts/Default.vue?vue&type=script&lang=js&
* core-js/modules/es.function.name in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/fetch.js and 1 other
* core-js/modules/es.number.constructor in ./node_modules/gridsome/app/components/Link.js, ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.object.to-string in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js and 4 others
* core-js/modules/es.regexp.constructor in ./node_modules/gridsome/app/components/Link.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.regexp.exec in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/components/Link.js and 2 others
* core-js/modules/es.regexp.to-string in ./node_modules/gridsome/app/components/Link.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.string.ends-with in ./node_modules/gridsome/app/directives/image.js
* core-js/modules/es.string.iterator in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js and 2 others
* core-js/modules/es.string.link in ./node_modules/gridsome/app/head.js
* core-js/modules/es.string.replace in ./node_modules/gridsome/app/utils/helpers.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.string.search in ./node_modules/gridsome/app/entry.client.js
* core-js/modules/es.string.split in ./node_modules/gridsome/app/utils/helpers.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.string.starts-with in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/components/Link.js and 1 other
* core-js/modules/es.string.trim in ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.symbol in ./node_modules/gridsome/app/app.js
* core-js/modules/es.symbol.description in ./node_modules/gridsome/app/app.js
* core-js/modules/es.symbol.iterator in ./node_modules/gridsome/app/app.js
* core-js/modules/web.dom-collections.for-each in ./node_modules/gridsome/app/head.js, ./node_modules/gridsome/app/directives/image.js and 2 others
* core-js/modules/web.dom-collections.iterator in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js

If I completely remove vue-svg-inline-loader, everything works again.

yarn list --depth 0:

yarn list v1.22.0
,,,
├─ @babel/[email protected]
├─ @babel/[email protected]
...
├─ @gridsome/[email protected]
...
├─ [email protected]
├─ [email protected]
├─ [email protected]
...
├─ [email protected]
...
├─ [email protected]

I feel that the issue is due to the usage of the 2.* version of core-js (wanted by this plugin) while gridsome 0.7 requires "@vue/babel-preset-app@^4.2.2 which expects core-js@^3.6.4.

This is probably related to gridsome/gridsome#982...

Is there any way to make this plugin use core-js 3 ? (or any better way to fix this?)

not clear how to use svg sprites

Assume I have an svg sprite file with 100 icons in it. normally I use it like this:

<svg class="icon icon-arrow-bottom-icon ">
  <use xlink:href="/static/app/images/icons/sprite-inline.svg#arrow-bottom-icon"></use>
</svg>

using absolute path and therefore loading it by separate load.

does your inline loader allow us to include this whole sprite inline? how?

Using Deprecated Babel Libraries

Installing the latest version, npm shows that deprecated Babel libraries are being used:

-> % npm update
npm WARN deprecated @babel/[email protected]: 🚨 As of Babel 7.4.0, this
npm WARN deprecated package has been deprecated in favor of directly
npm WARN deprecated including core-js/stable (to polyfill ECMAScript
npm WARN deprecated features) and regenerator-runtime/runtime
npm WARN deprecated (needed to use transpiled generator functions):
npm WARN deprecated 
npm WARN deprecated   > import "core-js/stable";
npm WARN deprecated   > import "regenerator-runtime/runtime";
+ [email protected]

svg inliner not working

when i yarn install, i got a warning

warning vue-svg-inline-loader > @babel/[email protected]: 🚨 As of Babel 7.4.0, this
package has been deprecated in favor of directly
including core-js/stable (to polyfill ECMAScript
features) and regenerator-runtime/runtime
(needed to use transpiled generator functions):

  > import "core-js/stable";
  > import "regenerator-runtime/runtime";

after that after build project i found all svgs as separate files in dist.
what am I doing wrong?

in vue.config.js

  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-svg-inline-loader')
      .loader('vue-svg-inline-loader')
      .options({ /* ... */ });
  },

yarn versions v1.12.3{ yarn:   '1.12.3',
  client_user:
   '0.1.0',
  node:
   '11.5.0',
  v8:
   '7.0.276.38-node.13',
  uv:
   '1.24.0',
  zlib:
   '1.2.11',
  ares:
   '1.15.0',
  modules:
   '67',
  nghttp2:
   '1.34.0',
  napi:
   '3',
  llhttp:
   '1.0.1',
  http_parser:
   '2.8.0',
  openssl:
   '1.1.0j',
  icu:
   '63.1',
  unicode:
   '11.0',
  cldr:
   '34.0',
  tz:
   '2018e' }
Done in 0.10s.

Failed to mount component: template or render function not defined.

Hi (again), sorry to bother you, but after I added your loader and put this code in my template

<img svg-inline svg-sprite class="icon icon-arrow-bottom-icon" src="@/assets/images/sale.svg" alt="svgicons"/>

I've got this warning in devtools console and my app stopped working (just plain whitescreen)
"vue.esm.js?efeb:591 [Vue warn]: Failed to mount component: template or render function not defined."

the loader was added right after vue-loader

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.vue$/,
        use: [
          "vue-loader",
          {
            loader: "vue-svg-inline-loader"
          },
        ]
      },
....

and the vueLoaderConfig is:

{
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

Neighboring SVGs replace each other's styles

Hi there!
I has a few svgs with the same id attributes and different styles. So when I insert them inline - styles from one svg applies to other with the same id's (and its looks logically right), but do we have the way to incapsulate styles and id's inside the svg tag before converting them to inline? Can we add some "scoped: true" option to svg-inline directive or something like this?)

Doesn't work

Config added to vue.config.js

  chainWebpack: config => {
    config.resolve.modules.add(appSrc);

    config.module
      .rule('vue')
      .use('vue-svg-inline-loader')
      .loader('vue-svg-inline-loader')
      .options({
        inline: {
          strict: false,
        },
      });

    config.resolve.alias.set(
      'ui.css',
      pathResolve(appSrc, 'constants', 'ui.css'),
    );

    /*  version */
    config.plugin('define').tap(definitions => {
      // eslint-disable-next-line no-param-reassign
      definitions[0] = Object.assign(definitions[0], {
        __VERSION__: JSON.stringify(appPackageJson.version),
      });
      return definitions;
    });

   const eslintRule = config.module.rule('eslint');
    eslintRule.uses.clear();

    config
      .plugin('NormalModuleReplacementPlugin')
      .use(webpack.NormalModuleReplacementPlugin, [
        /element-ui[/\\]lib[/\\]locale[/\\]lang[/\\]zh-CN/,
        'element-ui/lib/locale/lang/ru-RU',
      ]);
  },

Component code

          <li :class="$style.menuItem">
            <div :class="[$style.icon, $style.menuIcon]">
              <img
                svg-inline
                src="./img/profile.svg"
              >
            </div>
            <div :class="$style.name">
              <span>{{ userNameShort }}</span>
            </div>
          </li>

No errors, but doest not inline it

Moderate security vulnerability - Inefficient Regular Expression Complexity in nth-check

Hi!

I receive this notification when I ran npm audit.

npm audit
# npm audit report

nth-check  <2.0.1
Severity: moderate
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
No fix available
node_modules/vue-svg-inline-loader/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/vue-svg-inline-loader/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/vue-svg-inline-loader/node_modules/svgo
      vue-svg-inline-loader  *
      Depends on vulnerable versions of svgo
      node_modules/vue-svg-inline-loader

4 moderate severity vulnerabilities

Can you please update the svgo version this package is using?

Thanks!

Comments should not be parsed when inlining SVG

I'm trying to put an example on how to use this loader into one of my Vue files comment, but build fails because inlining happens even inside comments (even inside script and style tags, actually).

Is there a way to limit inlining to template tag and avoid it when inside comments?
Eg these will both break build process.

// Ex. <img svg-inline src="../path/to/icon.svg" alt="Title"/>

/* Ex. <img svg-inline src="../path/to/icon.svg" alt="Title"/> */

Render warning with nuxt

Hello there, I have a problem when rendering svgs in my nuxt project. It always shows me the following warning in the browser console:
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I am using the default config from the Readme file.

build: {
  /*
  ** You can extend webpack config here
  */
  extend(config, ctx) {
    // Run ESLint on save
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/,
      });

      const vueRule = config.module.rules.find(rule => {
        return rule.test.test('.vue');
      });
      vueRule.use = [
        {
          loader: vueRule.loader,
          options: vueRule.options,
        },
        {
          loader: 'vue-svg-inline-loader',
        },
      ];
      delete vueRule.loader;
      delete vueRule.options;
    }
  },
},

Is there anything wrong with the configuration or am I just missing anything or is it supposed to be like that?
Thanks in advance!

Not compatible with `strict mode` in IE

Not seeing a Contributing file or issue template so I'll do my best to be thorough.

OS: Windows 10
Browser: IE 11
Error: SyntaxError: Multiple definitions of a property not allowed in strict mode

Stack Trace:

SyntaxError: Multiple definitions of a property not allowed in strict mode
   at ./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-svg-inline-loader/src/index.js?!./src/js/templates/component.vue?vue&type=template&id=1d640f16&scoped=true& (http://localhost:3000/components.min.js:71:1)
   at __webpack_require__ (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:838:12)
   at fn (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:130:13)
   at eval code (eval code:2:22)
   at ./src/js/templates/component.vue?vue&type=template&id=1d640f16&scoped=true& (http://localhost:3000/components.min.js:201:1)
   at __webpack_require__ (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:838:12)
   at fn (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:130:13)
   at eval code (eval code:2:22)
   at ./src/js/templates/component.vue (http://localhost:3000/components.min.js:177:1)
   at __webpack_require__ (http://localhost:3000/app.min.js?0e8"

Steps to replicate:

Use svg-inline attribute on multiple tags in a single component or Webpack chunk file.
Set output chunks to use strict mode. In my case, I'm using babel and core-js which inject use strict automatically.
Open application with affected component in IE.

The affected component does not render, but others do. This issue is not present in any other browser, but occurs in IE anytime the plugin is used more than once per chunk in Webpack. When SVGs are embedded manually into components, the issue goes away. We need to support IE so I had to remove the plugin for now, but obviously embedding SVGs manually isn't ideal so I'd appreciate if someone could look into this.

If I were to speculate this seems to create multiple instances (1 for each SVG) with the same identifier when compiled by Webpack, but I'm not 100% certain if I'm on the right track.

parseError when using math operator (> or >=) on root element

Hi,
There is an issue with parsing of math operator.
The plugin think that my ">" (greater than) symbol is the end of the opening tag of the root element and append the sprite to this location which break the whole page.
Greater than symbol inside string (v-if, v-show or ternary js operator) should be ignored.

Source code:

<template>
    <div v-if="lastItem > 10">
        <!-- more -->
    </div>
</template>

Compiled code:

<template>
    <div v-if="lastItem ><svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;"><symbol id="sprite-6e59d10b0d068a69ed07029d53a15aef" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M0 5l6-5v10z" fill-rule="evenodd"/></symbol><symbol id="sprite-83def3b2274096294fe2023b84cc1ed6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M6 5l-6 5V0z" fill-rule="evenodd"/></symbol></svg> 10">
         <!-- more -->
    </div>
</template>

Expected result:

<template>
    <div v-if="lastItem > 10">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;"><symbol id="sprite-6e59d10b0d068a69ed07029d53a15aef" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M0 5l6-5v10z" fill-rule="evenodd"/></symbol><symbol id="sprite-83def3b2274096294fe2023b84cc1ed6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M6 5l-6 5V0z" fill-rule="evenodd"/></symbol></svg>
        <!-- more -->
    </div>
</template>

vulerabilities because of outdated svgo

it would be great if this could be updated to either svgo 2 or even remove svgo in the next major version. right now, there are unfixable vulnerabilities, even if you don't make use of the svgo feature:

npm audit fix shows:

No fix available
node_modules/vue-svg-inline-loader/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/vue-svg-inline-loader/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/vue-svg-inline-loader/node_modules/svgo
      vue-svg-inline-loader  *
      Depends on vulnerable versions of svgo
      node_modules/vue-svg-inline-loader

4 high severity vulnerabilities

Update Quasar example

Hey there, we found out that there's a bug while using this loader with Quasar regarding async components CSS extraction

freddy38510/quasar-app-extension-ssg#162 (comment)
quasarframework/quasar#13169 (comment)

This only becomes evident when using SSR/SSG, as you experience a FOUC

The example to use this loader with Quasar should be updated as follows

extendWebpack(cfg) {
  const vueRuleIdx = cfg.module.rules.findIndex(
    ({ test }) => test.toString() === /\.vue$/.toString(),
  );

  cfg.module.rules[vueRuleIdx].use.push({
    loader: 'vue-svg-inline-loader',
    options: { /* ... */ },
  })
}

Not sure if the chainWebpack version needs to be updated, but its usage is a bit buggy as that project hasn't been migrated to webpack 5 yet, so I'd just remove that one

How to use with laravel-mix

This is not a direct issue but I struggle configuring this with laravel mix. I implemented this in the frontend, on Vue2, and I used the basic webpack config file. In the meantime, the dev team implemented the backend on Laravel along with Laravel-mix. Since then, vue-svg-inline-loader has stopped working. I think the culprit is the misconfiguration, as with laravel mix I do not have the "vue.config.js" file anymore, but I have "webpack.mix.js".

I tried this:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: "vue-loader",
                        options: { /* ... */ }
                    },
                    {
                        loader: "vue-svg-inline-loader",
                        options: { /* ... */ }
                    }
                ]
            },
        ]
    },
});

and

mix.webpackConfig({
    module : {
        rules : [
            {
                use : [
                    'vue-svg-inline-loader',
                    {
                        loader: 'vue-svg-inline-loader',
                        options : {}
                    },
                ]
            },
        ]
    },
});

What am I missing?

Thank you

Conditionnal root-node

If my component has two root-nodes shown conditionally (this is valid as only one is shown at a time), my svg will always be in the v-else.

<template>
    <div v-if="someCondition">
        <img svg-inline src="...">
    </div>
    <div v-else>
        <!-- Sprite will be inserted here -->
    </div>
</template>

Attribute collision when one is bound and the other is not (using : shortand and not v-bind)

I upgraded my dependencies and I have some issues with the latest version (1.4.6).
By testing the older releases, it appears that the bug got introduced on version 1.3.0 (1.2.18 works fine).

My code:

      <img
        svg-inline
        src="../../assets/icon.svg"
        class="fill-current menu-icon"
        :class="{ 'text-red-900': !active }"
      />

Expected output: <svg> tag with at least the static classes (fill-current menu-icon)

Instead I get: the static part is removed, only the :class part is respected ( )

Interestingly, if I make a trivial modification to the class (add a whitespace for instance), the hot-reload injects the updated static classes and everything looks fine again.

Furthermore, if I replace :class with v-bind:class

on v1.3.0, everything seems to be fine
on v1.4.6 the compilation fails with duplicate attribute: v-bind:class

Probably relevant commit: f5f0a0f (#28)

invalid expression: Unexpected identifier in: expression: v-bind:v-if="'key === 'accessible''"

Errors compiling template:

  invalid expression: Unexpected identifier in

    'key === 'accessible''

  Raw expression: v-bind:v-if="'key === 'accessible''"


  64 |                      />
  65 |                      <label :for="`${key}-${value[0].values.value}`">
  66 |                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:v-if="'key === 'accessible''" v-bind:class="'accessible-icon'" v-bind:inline="''" v-bind:width="'14'" v-bind:height="'18'" v-bind:role="'presentation'" v-bind:focusable="'false'" v-bind:tabindex="'-1'"><use xlink:href="#sprite-fea294286c726087cd11bc05970d5a88" href="#sprite-fea294286c726087cd11bc05970d5a88"></use></svg>
     |                                                                                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  67 |                          {{ $t(key) }} ({{ value[0].values.count }})
  68 |                      </label>

Unexpected Token, expected "," when svg-inline used in object

  data() {
    return {
      tabs: [
        {
          name: this.$t('device_models.tabs.hca'),
          icon: '<img svg-inline src="assets/icons/hca.svg">',
          categories: { meter_type_keys: 'heat_cost_allocator' },
        },
    };
  },

        <div class="device-models__tab">
          {{ tab.icon }}
       </div>

SyntaxError: /Users/gk/repos/mh-platform/app/javascript/manager/components/device-models.vue: Unexpected token, expected "," (47:132)

  45 |           name: this.$t('device_models.tabs.hca'),
  46 |           path: '/device-models/hca',
> 47 |           icon: '<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind:svg-inline="''" v-bind:role="'presentation'" v-bind:focusable="'false'" v-bind:tabindex="'-1'"><path d="M0 0h42v42H0V0z" fill="#fff" fill-opacity=".01"/><path d="M0 0h42v42H0V0z" stroke="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 3a1 1 0 00-1 1v34a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1H15zm12 6H15v4h12V9zM15 7a1 1 0 112 0 1 1 0 01-2 0zm4-1a1 1 0 100 2 1 1 0 000-2z" fill="#4A4A4A"/><path d="M19 10h1v2h-1v-2zM20.478 10h1v2h-1v-2zM21.957 10h1v2h-1v-2zM23.435 10h1v2h-1v-2zM24.914 10h1v2h-1v-2z" fill="#4A4A4A"/></svg>',
     |                                                                                                                                     ^
  48 |           categories: { meter_type_keys: 'heat_cost_allocator' },
  49 |         },
  50 |         {

Not working when Vue binding is used on src attribute of image tag.

Hello fellow developers,

to make it short, there is no efficient way Webpack can handle this situation. Please use Vue plugin vue-svg-inline-plugin or vue-svg-inline-component instead.