`[object Object]` instead of svg string in url. about svg-url-loader HOT 8 CLOSED

I've added tests and enabled Travis CI to run also on Node 4.2 and everything is green, all tests pass.

@jalooc, this may be an issue with your specific SVG file or with your setup. Can you please provide more details?

from svg-url-loader.

This is one of the svgs I was using and I url-ed it in an scss (maybe that's the reason) file:

<svg fill="rgb(244,67,54)" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
</svg>

I moved on with the setup already so I don't have it, but I did it according to the instructions which are pretty simple. Then I don't think that was a problem. Sorry I can't help you more.

from svg-url-loader.

@jalooc, I've tried to put the icon you've provided (red trash can) and everything worked OK for me.
As I see, there may be multiple reasons for the problem you have:

1. Maybe, as you've said, something goes wrong when icon is in scss file. Although I've tried to use svg icon in less file, and I think it should work fine with other loaders, I hadn't chance to try it with scss file.
2. Maybe something is wrong with your setup.
3. Maybe Node.js version matters for some webpack loaders.

So, here is what can we do:
regarding 1) Add tests which check if svg is properly encoded when used as background-image in either less or scss file
regarding 2) If you can provide me a sample application demonstrating issue, I'll be able to debug the code and see what is the issue
regarding 3) Already done. All tests are running under Node 0.10, 0.12, Node 4.2, Node 5.1 under Travis CI.

Currently I'll be working on point 1. In the meanwhile I'll be waiting for your response for point 2. If you cannot provide me more information on point 2 till I'll be done with point 1, I'll close this issue.

Thank you for helping make svg-url-loader better!

from svg-url-loader.

Ok, shortly, my webpack module loader was defined this way:

{
      test: /\.svg$/,
      loader: 'svg-url'
}

and the url in scss file like this:

.svg-button--refresh {
    background-image: url('../svg_icons/refresh.svg');
}

The path for the url was correct, because otherwise it would throw errors.

As I said, I used it in a sass, being processed with this loaders:

{
      test: /\.s?css$/,
      loader: 'style!css!purifycss'
}

That was pretty much everything related to svg loading in my app during svg-url-loader. I switched to url-loader and it works fine, although of course it doesn't have the exceptional advantages of your plugin.

from svg-url-loader.

So, I've written 2 more tests (one using less and one using sass) which mimic your setup. Both of them are passing.
First one is at https://github.com/bhovhannes/svg-url-loader/blob/master/test/loader.spec.js#L79
Second one is at https://github.com/bhovhannes/svg-url-loader/blob/master/test/loader.spec.js#L111

There was a problem under Travis CI under Node 5.1 for less test (first one). For some reason webpack was not seeing my less file. I've assumed that this is because Node 5 is relatively new and may have issues. Note, that locally test passed.
I decided to leave only stable/LTS versions of Node in my Travis config and test this package only for these versions.

from svg-url-loader.

@jalooc, in your webpack config I don't see sass loader, only style!css!purifycss. Have you missed something?

As an example for LESS setup I have something like this:

    loaders: [
    {
            test: /\.less$/, 
            loaders: [
                'style-loader',
                'css-loader',
                'less-loader?cleancss'
            ]
        },
        {test: /\.svg/, loader: 'svg-url-loader'}
    ]

from svg-url-loader.

Hmm, very interesting observation :D I indeed don't have sass-loader package installed, bit still, I'm using sass scss files and all works correctly. I wonder how it is possible...

from svg-url-loader.

I'm closing this issue, since there is no feedback on this for already half a year.

from svg-url-loader.