Vue-svg-loader: How to use it along with file-loader and as a background image

Created on 8 Apr 2018 · 5Comments · Source: visualfanatic/vue-svg-loader

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

Source

Chucheen

👍2

Most helpful comment

@Chucheen We solved this at Fueled by using the oneOf functionality within Webpack:

{
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /inline/, // foo.svg?inline
      loader: 'vue-svg-loader',
      options: {
        // optional [svgo](https://github.com/svg/svgo) options
        svgo: {
          plugins: [
            {
              removeViewBox: false
            }
          ]
        }
      }
    },
    {
      loader: 'file-loader',
      query: {
        name: 'static/media/[name].[hash:8].[ext]'
      }
    },
  ]
},

You then import them slightly differently for the different types

import imageSrc from 'path/to/image/example.svg';
import ImageComponent from 'path/to/image/example.svg?inline;

…
components: {
  ImageComponent,
},
data() {
  return {
    src: imageSrc,
  },
},
…

<img :src="src" />
<image-component />

robsterlini on 11 May 2018

👍9

All 5 comments

Btw, i can't use 0.5.0 because of my vue version.

Chucheen on 8 Apr 2018

At this moment, i had to duplicate/change the extension for the files that i want to put inline from .svg to .inlinesvg and configure the loader as follows:

module.exports = {
    test: /\.inlinesvg$/,
    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}
            ]
        }
    }
};

Is there any other way? It feels hacky

Chucheen on 9 Apr 2018

👍4

@Chucheen We solved this at Fueled by using the oneOf functionality within Webpack:

{
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /inline/, // foo.svg?inline
      loader: 'vue-svg-loader',
      options: {
        // optional [svgo](https://github.com/svg/svgo) options
        svgo: {
          plugins: [
            {
              removeViewBox: false
            }
          ]
        }
      }
    },
    {
      loader: 'file-loader',
      query: {
        name: 'static/media/[name].[hash:8].[ext]'
      }
    },
  ]
},

You then import them slightly differently for the different types

import imageSrc from 'path/to/image/example.svg';
import ImageComponent from 'path/to/image/example.svg?inline;

…
components: {
  ImageComponent,
},
data() {
  return {
    src: imageSrc,
  },
},
…