'Icons Fallback' referencing a long-winded path

[lukewhitehouse]

Hi there,

So I've got a little obscure issue with the path thats generated for the background-image property within the icons.fallback.css or icons.fallback.scss. Here's my desired structure for the project:

assets
|-- dist/
|----- icons/
|--------- icons.fallback.css
|--------- icons.png.css
|--------- icons.png.css
|--------- png/
|-------------.png
|-- src/
|----- icons/
|--------- .svg
|--------- _icon_gen.scss.mustache

And here's my gulp task:

var paths = {
    src: {
        icons: 'assets/src/icons/'
    },
    dist: {
        icons: 'assets/dist/icons'
    }
}

gulp.task('sprites', function () {
    iconify({
        src: [paths.src.icons] + '**/*.svg',
        styleTemplate: [paths.src.icons] + '/_icon_gen.scss.mustache',
        pngOutput: [paths.dist.icons] + '/png/',
        cssOutput:  [paths.dist.icons] + '',
        svgoOptions: {
            enabled: false
        }
    });
});

So, I thought this would work, and it does for the most part ... its not until you look at the fallback that you see the problem...

.icon--logo{background-image:url('../../../Users/lukewhitehouse/Sites/png/logo.png')}

Any recommendations?

---

Also, It'd be cool if we could leverage the gulp.src and gulp.dist functions, and use a pipe-based system rather than having one object for everything.

[gavro]

Nice use case. I had not thought of such setups; will have to give this some though. The long-winded path is a nasty thing, needs to be fixed.

Concerning your last remark, see my reply @ https://github.com/gavro/gulp-iconify/issues/10. Using stream/pipe is tricky because this plugin needs all the src files to generate the combined css files. What kind of return is to be expected (if you need to to pipe anything to another plugin)?

[lukewhitehouse]

@gavro I imagine I'm coming from a similar experience that @mrmartineau is referencing is #10 then, whereby I've been used to Grunticon and how that works. To be honest thats all I'm looking for, the pipeline seems to be more of a best practice more than anything.

From a technical point of view I believe this will be a little different, but I've noticed gulp-svg-sprite seem to be able to accomplish the .pipe() syntax. Thoughts?

[steveszc]

I'm having the same issue with the long-winded path using the following gulp task: (my files structure is almost identical to @lukewhitehouse

gulp.task('svg', function(){
    iconify({
        src: './src/svg/*.svg',
        pngOutput: './dist/svg/png',
        scssOutput: './src/svg/scss',
        cssOutput:  './dist/svg',
        styleTemplate: './src/svg/svg-template.scss.mustache',
        svgoOptions: {
            enabled: false
        }
    })
;});

And I get rules that look like this in my icons.fallback.css

.i--cp-icon{background-image:url('../../../dist/svg/png/cp-icon.png')}

[lukewhitehouse]

any update on this @gavro ?

[gavro]

Sorry, still no updates on this yet. Hope to have time to get this fixed by next week!

[gavro]

@lukewhitehouse @steveszc Sorry I did not get to this sooner... Okay, i've done some debugging. I hope commit https://github.com/gavro/gulp-iconify/commit/95df9e1d34068c442682a18dd787aabfad9487cb fixes this. I haven't published it to npm yet; could you give this a testrun? Thanks!

[steveszc]

@gavro Sorry... I had to switch to an alternative solution for svg icons, not using gulp-iconify any longer.

[lukewhitehouse]

@gavro cheers for the update! I've changed up my workflow since then and I've gone ahead and wrote about it on my repo if you're interested - http://GitHub.com/lukewhitehouse/SVG-icon-workflow

[fyrebase]

@gavro this solution works, but I found if you pass false for css output it then triggers a TypeError: Arguments to path.resolve must be strings error