I am using the latest version of the loader and I am loving the ease and an uncluttered zen feeling it brings comparing to just using SVG inline, not to mention the hot reload benefits.
However the v-on:click directive does not work, and bear in mind I am unsure if this is a bug, was never a feature, or my configuration is somehow off.
I configured both Webpack and Vue using offered documentation, and am able to import SVG file and place it's component tag to component HTML. It does when you use it on an SVG element/tag natively.

Hi @visualfanatic,

I noticed that vue-svg-loader doesn't appear to be actively maintained. I totally understand, as open source projects can often be a pain to manage.

I'd love to offer to be a maintainer of this module and oversee day-to-day pull requests and issues. Let me know what your thoughts are!

Sam

I cannot handle how to configure this loader with custom options for svggo.

The problem is that my SVGs are conflicting because all of they have the same ids (a, b, c, etc). I found a solution on svggo options:
{ cleanupIDs: { prefix: 'somerandomid' } }

But, I cannot figure out how to customize the webpack config for this option.

I've tried this

config.module.rules = config.module.rules.map(rule => {
  if (rule.loader === 'vue-svg-loader') {
    return {
      test: /\.svg$/,
      loader: 'vue-svg-loader',
      options: {
        svggo: {
          plugins: [
            { cleanupIDs: { prefix: 'somerandomid' } },
          ]
        }
      }
    }
  }
  
  return rule
})

and this

config.module.rules = config.module.rules.map(rule => {
  if (rule.loader === 'vue-svg-loader') {
    return {
      test: /\.svg$/,
      use: () => ({
        loader: 'vue-svg-loader',
        options: {
          plugins: [
            { 
              cleanupIDs: { prefix: crypto.randomBytes(4).toString('hex') }
            },
          ],
        },
      }),
    }
  }
  
  return rule
})

But without success, am I doing something wrong?

I am loading an external svg into my Vue application as a Vue Component using the vue-svg-loader: https://www.npmjs.com/package/vue-svg-loader?activeTab=readme. I modified the loader configuration to make sure the IDs don't get dropped:

{
  test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    // optional [svgo](https://github.com/svg/svgo) options
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true},
        {cleanupIDs: false}
      ]
    }
  }
}

The svg I am trying to load looks something like this:

<svg class="external-svg">
   <g class="group-1">
      <path id="a"></path>
      <path id="b"></path>
      <path id="c"></path>
   </g>
   <g class="group-2">
      <path id="d"></path>
   </g>
   <g class="group-3">
      <path id="e"></path>
      <path id="f"></path>
      <path id="g"></path>
   </g>
   <g class="group-4">
      <path id="h"></path>
   </g>
   <g class="group-5">
   </g>
</svg>

Using the loader, the svg loads successfully, but some of the tags get dropped. The resulting looks as follows:

<svg class="external-svg">
   <g class="group-1">
      <path id="a"></path>
      <path id="b"></path>
      <path id="c"></path>
   </g>
   <path id="d"></path>
   <g class="group-3">
      <path id="e"></path>
      <path id="f"></path>
      <path id="g"></path>
   </g>
   <path id="h"></path>
</svg>

"group-2", "group-4" and "group-5" get dropped, but the paths inside are intact.

Is there someway to prevent this optimization the loader might be trying to do by removing the tags with one or less paths?

When I was using svgs as images and using require, I was able to dynamically require images. So I could have a folder of 1000 images and I wouldn't have to require them each by hand. In the component template I had <img :src=iconPath(dynamicValue)>.

iconPath is a method on a vue component like this

iconPath(dynamicValue) {
  return require(`./icons/${dynamicValue}.svg`)
}

Every svg file in ./icons would get included in my webpack bundle automatically, and then based on the value of dynamicValue, the correct image would appear in the component template.

I can't find a way to do it with vue-svg-loader without having to specify all the files themselves in some kind of icons/index.js file that has all the icons exported, so I can do import { MyIcon } from './icons'. Would there be a way to make it work like that?

As we have ?external it would be nice to have ?raw and get svg loaded as string?
Or is this possible already?

I'm using https://github.com/vuejs/vue-web-component-wrapper to build web component. When I serve app or build and open demo.html from dist svgs works fine on safari but when I inject this web component in another app (I tried with several angular apps) I see squares instead of svg files. When I remove vue-svg-loader and use external svg inside <img> tag everything is working. I don't know if this library is making this issue but without it everything works fine

Hello, your plugin is perfect. Then, I want to dynamically change value of fill from .svg file, but it doesn't work. I see your example can support change width and height. So, is my code has problem or the plugin cannot support change fill?

First, my config file can work and my .svg has show in browser.
Then, my code is:

<div class="vue-svg-loader">
  <p>vue-svg-loader</p>
  <svg-close class="close" />
</div>

import SvgClose from '../assets/svg/close.svg'

export default {
  name: 'VueSvgLoader',
  components: {
    'svg-close': SvgClose
  },
  data () {
    return {}
  }
}

.close{
  fill: #f00;
}

Thanks very much.

Hi,

This vue-svg-loader is really useful and I used it successfully with some JS projects.
Now I'm trying to use it in a project with Nuxt and Typescript and I cannot make Typescript understand that my SVGs are Vue component.

I get this error: Cannot find module '../assets/icons/notification.svg'

The path is right, it compiles (with errors) and works well in dev mode, but then I can't build for prod because of the errors.

I tried adding this in my index.d.ts without success:

import Vue from 'vue';
declare module '*.svg' {
  export default Vue;
}

Do you know how I can fix that? Thanks!

Since svgo 1.0.0, there is a plugin called inlineStyles, the basically copied the styling from the style tags to the svg itself. This is needed as some editors like illustrator exports the svg using this inline styling.

Because vue-svg-loader forces its dependencies on svgo, there is no way to load svg files exported by illustrator, unless, you manually add svgo loader in front of the webpack loader line.

Hey, could you publish the latest version to NPM?

I think in the earlier versions of vue-svg-loader, if you used the imported Icon inside your .vue <script>, it would return the path to the icon. That seems to have stopped – is there a way to re-implement that? Or is there a way for me to get that from the returned object?

I'm trying to use vue-svg-loader with Nuxt 2.0. I am using vue-svg-loader 0.10.0

In the nuxt.config.js I've added the recommended code:

    extend(config, ctx) {
      // Run ESLint on save
      const svgRule = config.module.rules.find(rule => rule.loader === 'url-loader');

      svgRule.test = /\.(png|jpe?g|gif)$/;

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      });

      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
      }
    }

But the svgRule is undefined...

TypeError: Cannot set property 'test' of undefined

I was using the same setup with Nuxt 1.0 and vue-svg-loader 0.8.0. That worked fine.

// parent component
<template>
  <child :icons="icons">
</template>

<script>
import child from './child.vue';
import icon1 from '../assets/icon1.svg';
import icon2 from '../assets/icon2.svg';

export default {
  data() {
    return {
      icons: [icon1, icon2]
    };
  },
  components: {
    'child': child
  }
}
</script>


// child component
<template>
  <div> {{ icons[0] }} </div>
  <div> {{ icons[1] }} </div>
</template>

<script>
export default {
  props: ['icons']
}
</script>

Usage of icons in child component is wrong, and how can I use props icons ?

as a result, svg in such format https://pastebin.com/m5hMA2A0 convert to https://pastebin.com/Ah1CVRcw

loader change id from path-1jaksljkaslasbf to a

import more than 1 svg with this format to page leads to visual display of two identical svg

P.S. i'm not good with english and not familiar with github, but i found this bug

Hello, as in title, every update using "npm update vue-svg-loader" ends up with version 0.5.0. Please help me to resolve the issue. Thank you.

I have the following config:

   .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [{ removeDoctype: true }, { removeComments: true }],
          removeViewBox: false,
        },
      })
      .end()
      .end()

When i import component like this:

import SomeSvg from '@/assets/hide.svg?inline';

this breaks in edge browser.

Looks like it is missing extra transpilation.

In edge i get following error:

SCRIPT1028: Expected identifier, string or number

and line error in code is 'inline strict';

I'm getting the following error when I attempt to load an svg icon. If I manually paste the contents of the svg file into the <template> tag, the icon renders as expected. Is there something else I'm missing in the webpack config?

ERROR in ./src/assets/noun_848947_cc.svg
Module parse failed: C:\repo\node_modules\vue-svg-loader\index.js!C:\repo\src\assets\noun_848947_cc.svg Unexpe
cted token (1:724)
You may need an appropriate loader to handle this file type.
| module.exports = {template: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path style="text-indent:0;text-transform:none;block-progression:tb" d="M49.938 5.007c-.256.013-.49.0
66-.688.125l-40 16A2.051 2.051 0 0 0 8 23.007v54a2.05 2.05 0 0 0 1.25 1.844l40 16a2.024 2.024 0 0 0 1.5 0l40-16A2.05 2.05 0 0 0 92 77.008v-54a2.052 2.052 0 0 0-1.25-1.876l-40-16a1.933 1.933 0 0
0-.812-.125zM50 9.164l34.594 13.843L70 28.82 35.406 15.007 50 9.164zm-20 8l34.594 13.843L50 36.82 15.406 23.007 30 17.164zm-18 8.781l36 14.406v49.657L12 75.633V25.945zm76 0v49.688L52 90.008V40.3
5l16-6.406v13.062a2 2 0 1 0 4 0V32.351l16-6.406z" overflow="visible" color="#000"/><text y="115" font-size="5" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial,
Sans-serif">Created by Rockicon</text><text y="120" font-size="5" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg
>'};
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/PlannedWork.vue 43:0-52
 @ ./src/components/PlannedWork.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/ActiveWave.vue
 @ ./src/components/ActiveWave.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

My webpack loader configuration

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {},
          // other vue-loader options go here
        },
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
        },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
    ],
  },

My vue file.

<template>
  <div class="box">
          <CaseIcon />
  </div>
</template>
<script>
import CaseIcon from '../assets/noun_848947_cc.svg';

export default {
  name: 'PlannedWork',
  components: {
    CaseIcon
  }
}
</script>

The SVG file contents

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 49.937503,957.36963 c -0.25586,0.0126 -0.4893,0.0653 -0.6875,0.125 l -39.9999997,16 c -0.7397,0.29923 -1.25829,1.07711 -1.25,1.875 l 0,54.00007 c 0.004,0.7875 0.51999,1.5484 1.25,1.8437 l 39.9999997,16.0001 c 0.47513,0.1921 1.02487,0.1921 1.5,0 l 40,-16.0001 c 0.73001,-0.2953 1.24589,-1.0562 1.25,-1.8437 l 0,-54.00007 c 0.008,-0.79789 -0.5103,-1.57577 -1.25,-1.875 l -40,-16 c -0.27834,-0.11001 -0.55664,-0.13757 -0.8125,-0.125 z m 0.0625,4.15625 34.59375,13.84375 -14.59375,5.8125 -34.59375,-13.8125 14.59375,-5.84375 z m -20,8 34.59375,13.84375 -14.59375,5.8125 -34.59375,-13.8125 14.59375,-5.84375 z m -18,8.78125 36,14.40625 0,49.65632 -36,-14.375 0,-49.68757 z m 76,0 0,49.68757 -36,14.375 0,-49.65632 16,-6.40625 0,13.06253 a 2.0001995,2.0001995 0 1 0 4,0 l 0,-14.65628 16,-6.40625 z" fill="#000000" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Rockicon</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

Seems as though the loader stips ID's from paths? Or am I doing something wrong? :)

Thanks

The error I get is

This relative module was not found:

* ./public/assets/home/icon-notification.svg in ./src/pages/home/Home.js?vue&type=script&lang=js

This is all I'm doing in my component:

import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';
import NotificationIcon from './public/assets/home/icon-notification.svg';

export default {
  name: 'home',
  components: {
    Header,
    Footer,
    NotificationIcon
  }
};

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/vue-fontawesome": "^0.1.1",
    "@sendgrid/client": "^6.3.0",
    "@sendgrid/mail": "^6.3.1",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "bourbon": "^5.1.0",
    "buttercms": "^1.1.1",
    "dotenv": "^6.0.0",
    "i": "^0.3.6",
    "npm": "^6.4.1",
    "prerender-spa-plugin": "^3.4.0",
    "swiper": "^4.4.1",
    "vue": "^2.5.17",
    "vue-meta": "^1.5.4",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.0.4",
    "@vue/cli-service": "^3.0.4",
    "@vue/eslint-config-prettier": "^3.0.4",
    "ejs": "^2.6.1",
    "express": "^4.16.3",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "vue-svg-loader": "^0.10.0",
    "vue-template-compiler": "^2.5.17",
    "webpack-hot-middleware": "^2.24.2"
  },

In vue.config.js, I have:?

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

Hi,

I found your package very usefull to quickly incorporate a SVG file. Now, i would like to manipulate the SVG with vuejs, but i don't see how can i do that.
My SVG is quick big and generated with insckape, so i can't really update the file manually.

I would like to do something : d3.selectAll('.rect').on('click', ... DO something with Vuejs)

Thanks,

Hey,

is there an release eta for your new version? I need something similar to your master branch :)

Kind regards

SVG file, i'm experiencing issue with:

<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8229 0.931058C15.1944 1.26428 15.4876 1.67553 15.6815 2.13533C15.9251 2.86505 16.0323 3.63338 15.9978 4.40191V11.5981C16.0323 12.3666 15.9251 13.135 15.6815 13.8647C15.4876 14.3245 15.1944 14.7357 14.8229 15.069C14.4514 15.4022 14.0109 15.6492 13.5328 15.7922C12.9013 15.9501 12.2507 16.0186 11.6001 15.9957H4.404C3.75341 16.0186 3.10283 15.9501 2.47127 15.7922C1.99319 15.6492 1.55264 15.4022 1.18118 15.069C0.809722 14.7357 0.516545 14.3245 0.322624 13.8647C0.0789936 13.135 -0.0282295 12.3666 0.00632657 11.5981V4.40191C-0.0282256 3.63337 0.0789975 2.86505 0.322624 2.13533C0.516544 1.67553 0.809722 1.26428 1.18118 0.931058C1.55264 0.597832 1.99319 0.350868 2.47127 0.207833C3.10283 0.0499623 3.75341 -0.0185577 4.404 0.00428858H11.6002C12.2507 -0.0185579 12.9013 0.0499621 13.5328 0.207833C14.0109 0.350867 14.4515 0.597832 14.8229 0.931058ZM10.8882 2.52429C10.9294 2.51587 11.2729 2.45487 11.3115 2.45153C11.5684 2.42935 11.7127 2.59801 11.7127 2.87183L11.7129 10.4157C11.7192 10.6126 11.7043 10.8097 11.6683 11.0034C11.6285 11.2001 11.5493 11.3868 11.4353 11.552C11.3203 11.7168 11.1711 11.8548 10.9978 11.9566C10.8255 12.0551 10.6377 12.1233 10.4424 12.1586C10.1625 12.2312 9.87067 12.246 9.58484 12.202C9.36921 12.1593 9.16954 12.0579 9.00782 11.9091C8.88401 11.7974 8.78392 11.662 8.71349 11.5109C8.64305 11.3598 8.60371 11.1961 8.59784 11.0295C8.59196 10.8629 8.61965 10.6968 8.67925 10.5412C8.73886 10.3855 8.82917 10.2434 8.94481 10.1233C9.0905 9.97457 9.26783 9.8606 9.46362 9.78984C9.75009 9.6912 10.0443 9.61672 10.3432 9.56721L10.6535 9.50465C10.7871 9.49088 10.9108 9.42768 11.0003 9.32747C11.0788 9.21192 11.113 9.07193 11.0965 8.9332L11.0966 5.40907C11.0966 5.13956 10.9758 5.0661 10.7184 5.11558C10.5344 5.15145 6.58354 5.94823 6.58354 5.94823C6.36069 6.00207 6.28236 6.07491 6.28236 6.35142L6.28245 11.5152C6.28589 11.7115 6.26806 11.9076 6.22927 12.1001C6.18955 12.2968 6.11029 12.4835 5.9963 12.6487C5.88133 12.8135 5.7321 12.9515 5.55882 13.0533C5.38665 13.1527 5.19881 13.222 5.00337 13.2583C4.72346 13.3309 4.43167 13.3457 4.14584 13.3017C3.92997 13.2579 3.73033 13.1555 3.56885 13.0057C3.32413 12.777 3.18007 12.4606 3.16826 12.1259C3.15645 11.7911 3.27785 11.4653 3.50584 11.2199C3.65151 11.0712 3.82883 10.9573 4.02461 10.8865C4.31107 10.7879 4.6053 10.7134 4.90419 10.6639L5.21451 10.6013C5.34814 10.5876 5.47179 10.5244 5.56126 10.4241C5.64197 10.3104 5.67919 10.1714 5.66614 10.0326V4.08573C5.66571 4.03209 5.6694 3.97851 5.67718 3.92544C5.69034 3.80629 5.74731 3.69629 5.83705 3.61681C5.92327 3.54854 6.0251 3.50276 6.13339 3.48358L6.13522 3.48319L10.8882 2.52429Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="0" y1="0" x2="17" y2="17" gradientUnits="userSpaceOnUse">
<stop stop-color="#FB5E6D"/>
<stop offset="0.530387" stop-color="#935FFA"/>
<stop offset="1" stop-color="#4E9EF8"/>
</linearGradient>
</defs>
</svg>

It works if i just open it in a browser, but not through svg-loader. Here's my settings (vue.config.js):

svgRule
  .oneOf('inline')
  .resourceQuery(/inline/)
  .use('vue-svg-loader')
  .loader('vue-svg-loader')
  .options({
    svgo: {
      plugins: [{ removeViewBox: false }]
    }
  })
  .end()
  .end()
  .oneOf('external')
  .use('file-loader')
  .loader('file-loader')
  .options({
    name: 'assets/[name].[hash:8].[ext]'
  });
}

What's wrong?

Before vue-svg-loader my svg looks like this.

<svg xmlns="http://www.w3.org/2000/svg" width="59.225" height="15" viewBox="0 0 59.225 15">

When i include it as a vue component it removes viebox. I can not scale my svg without viewbox.

<svg xmlns="http://www.w3.org/2000/svg" width="59.225" height="15">

I'm using your loader with vue 2.3.4 and after runing webpack and checking it in the browser it says Invalid Component definition but when i check the .svg it shows for example:

module.exports = {template: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"/></svg>'};

I don't know why it isn't working.

Hi everyone,

firstly, thank you for a great loader! Works very well, although I'd like to use vue-svg-loader with url-loader. vue-svg-loader for Vue components and url-loader for css files. Before to use vue-svg-loader I had the following rule:

        {
          test: /\.(svg|svgz)(\?.+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'svg/[name].[ext]'
              }
            },
            {
              loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
              options: {
                // optional [svgo](https://github.com/svg/svgo) options
                svgo: {
                  plugins: [
                    {removeDoctype: true},
                    {removeComments: true}
                  ]
                }
              }
            },
          ]
        },

However they don't seem to work together with vue-svg-loader.

Hey Damian!

I just installed 0.12.0 and everything works fine, except Cypress in headless mode. The error I'm getting is:

Uncaught SyntaxError: Unexpected token ...
This error originated from your application code, not from Cypress.
When Cypress detects uncaught errors originating from your application it will automatically fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the 'uncaught:exception' event.
https://on.cypress.io/uncaught-exception-from-application

Downgrading to 0.11.0 seems to fix the problem. So it looks like the code generated by the loader or one of its dependencies produces Object rest spread operator that might not work in headless mode without extra transpilation.

Hi!

I have tried doing everything described in documentation, but I can't get vue-svg-loader to work with Nuxt.js

I get this error:

vue.runtime.esm.js:587 [Vue warn]: Invalid Component definition: data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0icmVkIiAvPgo8L3N2Zz4g

found in

---> <Pages/index.vue> at pages/index.vue
       <Nuxt>
         <Default> at layouts/default.vue
           <Root>

For some reason svg gets converted to base64 even though I removed it from url-loader test regex:

const svgRule = config.module.rules.find(
          rule => rule.loader === "url-loader"
        );

        svgRule.test = /\.(png|jpe?g|gif)$/;

        config.module.rules.push({
          test: /\.svg$/,
          loader: "vue-svg-loader"
        });

Here is a repo for reproduction:

FistMeNaruto/vue-svg-loader-test

So, I've placed the files correctly into the directory, and have imported them

Template is:

<nav class="navbar main">
  <div class="container-fluid">
    <div class="nav-header">
      <router-link to="/" class="navbar-brand">
        <main-logo class="white"/>
        <alt-logo class="grey"/>
      </router-link>
      <button class="navbar-toggle hamburger hamburger--3dy" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    </div>
    <div class="nav-wrapper">
      <router-link to="/" class="navbar-brand">
        <main-logo class="icon"/>
      </router-link>
      <ul class="nav-links">
        <li v-for="llink in nav_links1">
          <router-link :to="{ path: 'llink' }">
            <span>{{ llink.name }}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</nav>

Script is:

import MainLogo from '../../assets/images/logos/main-logo.svg';
import AltLogo from '../../assets/images/logos/alt-logo.svg';

export default {
  name: 'main-nav',
  data () {
    return {
      nav_links1: [
        { name: 'Features', path: '/features' },
        { name: 'Pricing', path: '/pricing' },
        { name: 'Docs', path: '/docs' },
        { name: 'Support', path: '/support' }
      ],
      nav_links2: [
        { name: 'Login', path: '/login' },
        { name: 'Sign up', path: '/signup' }
      ]
    }
  },
  components: {
    'main-logo': MainLogo,
    'alt-logo': AltLogo
  }
}

I've also put the config code in my webpack.base.conf.js

I (@visualfanatic) updated your issue, so HTML and JS display correctly 👍

Hello. Love the loader! But Vue complains when using it in an SSR setup:

[Vue warn]: You are using the runtime-only build of Vue where the template
compiler is not available. Either pre-compile the templates into render functions,
or use the compiler-included build.

found in

---> <ArrowTopIcon>
       <Sitemap>
         <Anonymous>
           <Root>

Any suggestions?

Hi!
Just tried vue-svg-loader.
I started my project via vue init webpack, which had put

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',

in my webpack.base.conf.js. I had to remove 'svg' from it, to make vue-svg-loader work.

I'm a novice with webpack, but I presume others might have the same problem, so please include it in your README.md

I'm using file-loader with the following configuration:

const { env, publicPath } = require('../configuration.js')

module.exports = {
  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
  use: [{
    loader: 'file-loader',
    options: {
      publicPath,
      name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name]-[hash].[ext]'
    }
  }]
}

and also vue-svg-loader with the following configuration

module.exports = {
    test: /\.svg$/,
    loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
    options: {
        // optional [svgo](https://github.com/svg/svgo) options
        svgo: {
            plugins: [
                {removeDoctype: true},
                {removeComments: true}
            ]
        }
    }
};

Then, in my js file

//IMAGES with file loader
import homieWhiteImg from 'AssetsRoot/images/logos2.0/homie-blanco-200px.png';
import infoImg from 'AssetsRoot/images/onboarding/landing/info.svg';
import crossImg from 'AssetsRoot/images/onboarding/landing/cross.svg';
import bestTenantImg from 'AssetsRoot/images/onboarding/landing/best_tenant.png';
import paymentsOnTimeImg from 'AssetsRoot/images/onboarding/landing/payments_on_time.png';
import maxVisibilityImg from 'AssetsRoot/images/onboarding/landing/max_visibility.png';
import legalProtectionImg from 'AssetsRoot/images/onboarding/landing/legal_protection.png';
import diningImg from 'AssetsRoot/images/onboarding/landing/dining.png';
import mailWhiteImg from 'AssetsRoot/images/onboarding/landing/mailwhite.png';
import telefonoWhiteImg from 'AssetsRoot/images/onboarding/landing/telefonowhite.png';
import fbmessengerWhiteImg from 'AssetsRoot/images/onboarding/landing/fbmessengerwhite2x.png';
import topBedImg from 'AssetsRoot/images/onboarding/landing/topbed.png';
import facebookSvg from 'AssetsRoot/images/onboarding/landing/fb.svg';
import twitterSvg from 'AssetsRoot/images/onboarding/landing/tw.svg';
import instagramSvg from 'AssetsRoot/images/onboarding/landing/in.svg';
import mediaFinancieroImg from 'AssetsRoot/images/iconos-homie/homes_index/medios/full-color/financiero.jpg';
import mediaEntrepreneurImg from 'AssetsRoot/images/iconos-homie/homes_index/medios/full-color/entrepreneur.png';
import mediaInmobiliareImg from 'AssetsRoot/images/iconos-homie/homes_index/medios/full-color/inmobiliare.jpg';
import mediaReformaImg from 'AssetsRoot/images/iconos-homie/homes_index/medios/full-color/reforma.jpg';

export default{
  props: {
    currentUser: Object
  },
  data: data,
  beforeMount: beforeMount,
  methods: {
    toggleInfo: toggleInfo,
    toggleBenefit: toggleBenefit,
    scrollToWhyUs: scrollToWhyUs,
    publishNow: publishNow,
    signIn: signIn,
    toOnboarding: toOnboarding
  },
  computed:{
    isCurrentUserLogged: isCurrentUserLogged
  },
  components: {
    hButton,
    hAuthentication,
    facebookSvg,
    twitterSvg,
    instagramSvg
  },
  mixins: [campaign]
}

I have a couple of elements that i would like to use with a src=infoImg, but when using both vue-svg-loader and file-loader, one or the other crashes. If I use only vue-svg-loader src=infoImg is equal to [object object], and if i use only file-loader, svg are not being loaded in an inline fashion. How can i use both?

I'm using 0.4.0

Thanks in advance

hi,
is there some possibilities to make random generated id. Because without it svg images collide together.
thx

Hi, I was curious as how to configure the Jest transform when inline and external svgs are in use with the '?inline' method shown in the FAQ?

I get a 'Could not locate module' error when the unit test hits the import statement now.

Error:

Vue packages version mismatch:

• [email protected]
• [email protected]

Hi! Thanks for putting this together :)

I’m getting a Invalid Component definition: error when trying to load in an SVG.

This is how I’ve set it up in the component:

<script>
    import Icon from '../assets/icons/logo.svg'

    export default {
        components: {
            Icon
        }
    }
</script>

This is the webpack 1.x config loaders:

loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
          test: /\.svg$/,
          loader: 'vue-svg',
      }

Does the SVG need to be set up a certain way? Let me know if you need anything else to help debug.

Thanks again!

It would be fantastic if we could add the <title> and/or <description> tags into the <svg> itself, based on the context it's used in. Sometimes the title will be different for the icon, based on the context.

I would say either just allowing us to slot in content to the SVG or accept those props would be amazing.

<template>
  <MySvg>
    <title>Some Unique Title</title>
    <description>A really cool description about this specific context</description>
  </MySvg>
</template>

OR

<template>
  <MySvg
    title="Some Unique Title"
    description="A really cool description about this specific context"
  />
</template>

What do you think?

latest

Oh i found faq use in typescript
Could Anyone tell me where I need to put this code?

Is adding a index.d.ts file in the module path and pasting the code in it right?

declare module '*.svg' {
  const content: any;
  export default content;
}

export = module

Then why am I still ctaching problems?

I install the module,and I found

a red underline.

All the modules are the latest, I got vue @2.6.7 and [email protected]. My cli version is 3.4.1.I don't know what goes wrong

Here are my config files，I tryed several svg.

vue.config.js

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule.use('vue-svg-loader').loader('vue-svg-loader');
  }
};

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: 'vue-svg-loader',
        test: /\.svg$/u
      }
    ]
  }
};

We are using this lib and are combining it with other JS resources. The problem is those resources are 'use strict' and so the build blows up on the svg's because the render function contains "with(this)" .. I know this is probably coming from one of your dependencies, but it sure would be nice if your system handled it. I don't think the rendered functions even use 'this' so maybe you could just strip it.

I'm including svg icons in my application using relative paths.

import CheckIcon from '../../assets/icons/check-icon.svg';

However, when I run npm run build absolute paths appear in app.js for these icons.

var toString = function () {return "/Users/username/documents/project/src/assets/icons/check-icon.svg"};module.exports = { render: render, toString: toString };

(I modified the path for security reasons.)

If a different developer runs the build, app.js will be different because of the absolute path. My application is a browser extension. In order to be approved, their review team must be able to run the build and get the same files as when I run the build. (They look at the MD5 checksum.)

Hi,

Would it be possible to add an option to remove SVGO's optimisations from the loader completely?
Currently SVGO manages to strip my style tags, even when I set removeStyleElement: false (it strips the style tag from <defs> even after I've set every svgo plugin to false) 😕

Hi,

if i have svg like background-image: url("./img/some.svg");
it dont works now after i install vue-svg-loader
and its private Cannot GET /Applications/someproject/src/components/somecomponent/img/some.svg
some hints ??

thx for reply

Pretty self-explanatory. If I load multiple SVG's on the same page and they both have radialGradients (but with different gradient options) for example, both will take on the styles of the first one loaded in. It's not a class or id related issue as it persists when I change them.

I would like to use both inlined svg and to use as a background-image. I've followed your FAQ in modifying the Webpack chain.

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]',
      });
  },
};

But having trouble finding the assets background-image: url(@/assets/svg/back.svg);

* ./@/assets/svg/back.svg in ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-on eOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SongList.vue?vue&type=style&index=0&id=1eedc603&s coped=true&lang=css&

Is it possible to load it from the assets folder in src? I see from the examples it's used from public.

Using this plugin, every SVG I import is interpreted for inline use. However, can I somehow make Vue CLI import an SVG the regular way? I want to use the path to an SVG in an <img> tag's src that is dynamic, the same way described here. How can this happen? If it can't, could you please implement this functionality?

/ / package.json
{
......
......
"dependencies": {
"axios": "^0.18.0",
"es6-shim": "^0.35.3",
"moment": "^2.22.2",
"lodash": "^4.17.10",
"proxy-polyfill": "^0.3.0",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.15",
"@vue/cli-plugin-eslint": "^3.0.0-beta.15",
"@vue/cli-service": "^3.0.0-beta.15",
"@vue/eslint-config-standard": "^3.0.0-rc.3",
"cross-env": "^5.1.6",
"element-ui": "^2.4.1",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"vue-svg-loader": "^0.7.0",
"vue-template-compiler": "^2.5.17"
},
......
......
}

// vue-cli3 vue.config.js
const path = require('path')

module.exports = {
......
......
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].chunksSortMode = 'none'
return args
})

const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule.use('vue-svg-loader').loader('vue-svg-loader')

}
}

vue-svg-loader <= 0.5.0 // program runs well

vue-svg-loader > 0.5.0 // not work

Example code:

<style scoped lang="scss">
.svg-dashboard {
  &.active {
    path {
      fill: #f4a660;
    }
  }
}

Output:

.svg-dashboard.active path[data-v-f20d224e] {
  fill: #f4a660;
}

Scoped css is generating but data attribute doesn't add to path inside svg. When I paste svg code inline without loader, scoped attribute is added.

Hi,

After adding a svg through your webpack plugin it displays correctly but yet triggers the following error in the console:

Error: attribute d: Expected number, "…6.81h9.51v22.19aNaN NaN 0 0
It's at el.setAttribute(key, value); from vue.esm.js.

Any idea what is causing this?

Kind regards,
Ward

The MyComponent is importing an SVG file, and then using it in the code. I cannot unit test such component because vue-svg-loader is not configured in my Jest.

import { shallowMount } from "@vue/test-utils";
import MyComponent from "../MyComponent";

describe("MyComponent.vue", () => {
    it("should put new date if is was passed via props", async () => {
        const wrapper = shallowMount(MyComponent, {
            propsData: {
                value: "2018-01-05"
            }
        });

The unit test throws... Cannot render the SVG.

How to add vue-svg-loader to the Jest configuration?

Hello @visualfanatic.

First of all, thanks a lot for your work on this package. As for Junior Developer, I just can't describe how I like the easiness of using SVG in my Vue project using vue-svg-loader.

Unfortunately, after I updated all packages in my project, your loader stops working properly for some SVG. Actual result: some SVG are just empty. I downgraded the package to 0.3.0 - and it works again.

There were no errors in the console, so I'm not able to provide you some additional information. But please note SVG code I'm having the issue with (they worked on 0.3.0 but failed on 0.5.0):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 95.549 95.549" version="1.1" viewBox="0 0 95.549 95.549" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
	<path d="m88.543 17.948c-3.02 0-5.591 1.924-6.573 4.607l-13.799 1.777c-1.286-1.54-3.218-2.522-5.376-2.522-3.861 0-7.006 3.144-7.006 7.006 0 1.562 0.521 3.001 1.389 4.168l-10.193 22.929c-0.655 0.072-1.283 0.237-1.872 0.479l-8.328-8.042c0.117-0.507 0.185-1.031 0.185-1.573 0-3.862-3.144-7.005-7.006-7.005s-7.005 3.143-7.005 7.005c0 0.712 0.108 1.399 0.307 2.048l-14.308 15.047c-0.621-0.182-1.274-0.283-1.952-0.283-3.862-1e-3 -7.006 3.144-7.006 7.005 0 3.863 3.144 7.007 7.006 7.007s7.005-3.144 7.005-7.007c0-0.801-0.142-1.567-0.391-2.284l14.152-14.884c0.69 0.229 1.426 0.356 2.191 0.356 0.934 0 1.824-0.188 2.64-0.521l8.344 8.057c-0.113 0.5-0.179 1.018-0.179 1.551 0 3.862 3.144 7.006 7.006 7.006s7.005-3.144 7.005-7.006c0-1.783-0.676-3.408-1.777-4.646l9.962-22.41c3.154-0.076 5.792-2.243 6.585-5.167l13.241-1.705c1.267 1.821 3.371 3.019 5.753 3.019 3.861 0 7.006-3.143 7.006-7.005s-3.145-7.007-7.006-7.007z"/>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width="169.68px" height="169.68px" enable-background="new 0 0 169.676 169.676" version="1.1" viewBox="0 0 169.676 169.676" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
		<path d="m80.668 53.92c-4.303 0-7.336 0.383-8.981 0.758v28.582c2.027 0.63 4.427 0.758 7.591 0.758 11.633 0 18.713-5.815 18.713-15.679-1e-3 -9.487-6.582-14.419-17.323-14.419z"/>
		<path d="m84.841 2e-3c-46.851 0-84.841 37.98-84.841 84.833 0 46.854 37.99 84.839 84.841 84.839 46.846 0 84.835-37.985 84.835-84.839 0-46.848-37.989-84.833-84.835-84.833zm21.363 86.919c-6.314 6.198-15.924 9.236-26.927 9.236-2.912 0-5.444-0.126-7.591-0.63v32.25h-15.431v-84.103c5.693-1.013 13.406-1.773 23.786-1.773 11.369 0 19.592 2.403 25.034 6.954 5.05 4.177 8.345 10.876 8.345 18.843 4e-3 8.095-2.53 14.678-7.216 19.223z"/>
</svg>

The following SVG works both for 0.3.0 and 0.5.0:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 483.013 483.013" version="1.1" viewBox="0 0 483.013 483.013" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m477.04 219.2l-98.468-170.53c-7.974-13.802-22.683-22.292-38.607-22.292h-196.93c-15.923 0-30.628 8.49-38.608 22.292l-98.462 170.53c-7.961 13.801-7.961 30.785 0 44.588l98.462 170.54c7.98 13.802 22.685 22.293 38.608 22.293h196.93c15.925 0 30.634-8.491 38.607-22.293l98.469-170.54c7.96-13.803 7.96-30.787 0-44.588z"/>
</svg>```