Vue-material: How to use md-icon/md-src with custom svg file and webpack ?

[mchasles]

I'm including custom svg icons using md-icon component and copying my svg files to the build directory (thanks to 'copy-webpack-plugin')

In my webpack plugins conf:

new CopyWebpackPlugin([
      { from: './src/assets' , to: 'assets'}
])

In my component template:

<md-icon class="md-primary" md-src="assets/my-custom-icon.svg"></md-icon>

It works but I'm wondering if it's the right way to do it ? Is there a cleaner way ? I mean without copying svg files...

Thanks !

[pablohpsilva]

Hello! @mchasles ! How are you?
Dude, thanks for opening this issue.

If you're using the default config from vue-cli, you could place your images in the assets folder (like you did) and use the tilde operator, like this:

<md-icon class="md-primary" md-src="~/assets/my-custom-icon.svg"/>

Webpack will take care of image handling for you so you don't have to copy it.

[mchasles]

Hello, thanks for your reply !

Indeed I'm using default vue-cli config. Unfortunately, what you suggested did not work for me, I'm probably missing something...
So I kept with my way of doing it copying my svg files but I found out that it was already set in vue-cli config copying my svg files in the "static" folder (https://vuejs-templates.github.io/webpack/static.html). So I did not need the CopyWebpackPlugin at the end.

<md-icon class="md-primary" md-src="/static/my-custom-icon.svg"/>

Thanks for your help and for your great job with vue-material !

[Fleeck]

@pablohpsilva Tilda didn't work for me either, however any other images are imported properly.
In console it says GET http://localhost/question/~images/question-icon.svg 404 (Not Found), so porbably it's looking not there.

[johwer]

This i how I do it for now as I run vue-cli. I set svg to run with file-loader (you can set it as fallback also with the url-loader). The problem here is that it will convert the svg to 64 bit.

{
 test: /\.(png|jpe?g|gif)(\?.*)?$/,
 loader: 'url-loader',
   options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
   }
},
{
  test: /\.(svg)(\?.*)?$/,
    loader: 'file-loader',
    options: {
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},

Then include the svg with require like this and use ":" before the md-src for the bidning. And use the requrie inside like this.
<md-icon class="md-size-2x md-primary" :md-src="require('@/assets/img/ic_menu_black_24px.svg')"></md-icon>

When everything works the i element should have a svg element inside like this
<i class="md-icon md-size-2x md-primary md-theme-elmDefaultHeaderTheme"><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path> </svg></i>