gavro / gulp-iconify Goto Github PK

Hello, there is just a small issue with image demensions. If width and height attributes of <svg> contains px, like so:

width="27px" height="27px"

This breaks the following lines L15 lib/iconify.js

dimensions.width = Math.round(doc.documentElement.getAttribute('width'));
dimensions.height = Math.round(doc.documentElement.getAttribute('height'));

So I guess attribute values should have a wrap with parseInt or smth.

There are no dimensions in the fallback SCSS file.

Hi,

I'd like to overwrite the default template (using styleTemplate). What I'd really like it to have is one template for my PNG output, and one template for the SVG output.

I'm using Modernizr, which is adding the no-svg class to browsers that do not support SVG. If I overwrite the default template both PNG and SVG will use said template.

Ideal situation:

_icons.svg.scss

.icon {
    background-repeat: no-repeat;

    {{#items}}
    &.icon-{{slug}} {
        background-image: url('{{{datauri}}}');
    }

    {{/items}}
}

_icons.png.scss

.no-svg .icon {
    background-repeat: no-repeat;

    {{#items}}
    &.icon-{{slug}} {
        background-image: url('{{{datauri}}}');
    }

    {{/items}}
}

Please also notice the _ that prepends the filenames (see issue #16).

The script sorely needs a callback that can run after all the tasks have completed (since iconify-convert can take a long time to complete) . It would be referenced like so:

iconify({ }, function () { console.log("Processing is done! Yay!"); });

... so that extra processing, such as renaming .scss to .less (I'm considering opening an issue for LESS-support, by the way), can take place once the final files have actually been written. :-)

SVGO is breaking lots of our images. We actually use svgo but had to disable some of the optimizations. ('removeUnknownsAndDefaults' and 'mergePaths')

Could svgo be outright skipped with an option?

gulp-svg2png reached version 1.0.0 and now accepts a concurrency limit option to improve performance. This concurrency limitation greatly improved the build time on the project I'm working on.

I'll be submitting a PR for this.

The Grunt team recently released Grunticon-lib (https://github.com/filamentgroup/grunticon-lib), a standalone implementation of Grunticon. They've also said they have no plans to create an official gulp plugin for Grunticon-lib.

The next version of Gulp-iconify should be a gulp wrapper for Grunticon-lib. (Maybe it gets a new name too... Grulpicon, in keeping with the Grunticon, Grumpicon naming convention) I have a crude implementation of a gulp task using Grunticon-lib that could serve as a starting point for a pull request to make the change.

Switching from gulp-iconify to grunticon-lib reduced my svg icon build step from several minutes to <30 sec to process around 150 SVG icons.

I need some clarity on how to URL encode the SVG files in the CSS. using SVGO in the command line I can specify "--datauri enc" to get a URL encoded version of the SVG. I have tried to add this to the svgoptions like this with no luck:

svgoOptions: {
enabled: true,
options: {
datauri:"enc"
}
}

Any advice on how to make this work?
TIA

Is it possible to disable the css output? In my project I only the SCSS files.

This doc implies that units are allowed in SVG height/width attributes: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
All the SVGs I am using have px units.

Any chance you'll release an update where it's possible (like with grunticon) to specify width and height for the output like so?

.icon {
background-repeat: no-repeat;
display: inline-block;
}

{{#items}}
.icon-{{slug}} {
background-image: url('{{{datauri}}}');
width: {{this.width}};
height: {{this.height}};
}
{{/items}}

Cheers,
Prakash

Hi,

File name of scss output should starting by '_' like: _icon.svg.scss.
Because when lib-sass compile these files, it'll create : icon.svg.css, icon.png.css and icon.fallback.css in dist folder.
I think users can import these files as a dependencies in there main.scss like so:
@import "icon.svg";

What do you think?

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.

Is it possible to use streamed files instead of src defined in the options? I see in your index.js that you have done so but it seems that I cannot when using it in my gulpfile.. I get this error:

Error: src not defined; please specify your source (src: './img/icons/*.svg').

I would like to run imagemin and some other tasks before this task, then run iconify on those files without saving them temporarily. Something like this:

gulp.task('icons', function () {
    return gulp.src(CONFIG.IMG.SRCDIR +'/icons/source/**/*.{svg,png,jpg,gif}')
        .pipe($.changed(CONFIG.IMG.DISTDIR +'/icons'))
        .pipe($.imagemin({
            progressive: true,
            svgoPlugins: [
                { removeViewBox: false },
                { removeUselessStrokeAndFill: false }
            ],
            use: [
                mozjpeg(),
                pngquant(),
                gifsicle()
            ]
        }))
        .pipe($.iconify({
            // pngOutput: './img/icons/png',
            cssOutput:  CONFIG.CSS.DISTDIR,
            svgoOptions: { enabled: false }
        }))
        .pipe(gulp.dest(CONFIG.IMG.DISTDIR +'/icons'));
});

Let me know what can be done..

Cheers

It's an extremely easy to implement, and would be really handy to have. I have a fork with it implemented but its not auto-mergable due to other non-essential chaotic changes of mine. I will still throw pull request, so you can copypaste the change to png option if you want to. Thanks for you work on a lib!

Hiya, thanks for making this it's really great...

But I'm not understanding the point of rendering the .scss files, since they are compiled to css anyway, and need to be forked for delivery to different browers, so there's no point in integrating them into the core CSS. Is it possible to disable the scssOutput altogether?

Hi, when I run npm install with '"gulp-iconify": "^0.5.0"' in my dependencies I get the following error:

Error extracting /Users/jamesnock/.npm/fs/0.0.0/package.tgz archive: ENOENT: no such file or directory, open '/Users/jamesnock/.npm/fs/0.0.0/package.tgz'

When I inspect the contents of '/Users/jamesnock/.npm/fs/' I have a folder named '0.0.2' rather than '0.0.0' which is causing the issue. Any ideas on how to fix?

Brackets () aren't escaped in your SVG CSS/SCSS.

You don't have to encode SVGs as base64 when they are embedded, they just add data overhead (usually 33%).

They can be embedded just like this:
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

Reference:
http://css-tricks.com/probably-dont-base64-svg/

For my project I'd like to use gulp-iconify, but I'm running into issues when I'm trying to run multiple instances of the gulp task with the 'runSequence' plugin.

gulp.task('default:iconify', function (callback) { runSequence(['iconify:sts', 'iconify:sbc', 'iconify:stu', 'iconify:itd', 'iconify:stb', 'iconify:vde'], callback ); });

I think the issue is that the task gives a callback after the iconify tasks are started instead of finished. Is there a workaround for the lack of callbacks? Thanks in advance

I get this error when doing npm install with gulp-iconify in my package.json

Downloading binary from https://github.com/sass/node-sass/releases/download/v3.13.1/darwin-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/darwin-x64-57_binding.node":

HTTP error 404 Not Found

I believe it is related to this issue, sass/node-sass#955. Basically, this is a very old version of node-sass. Is it possible to update the version?

Since the update to macOS Sierra I get this error message:
/node_modules/gulp-iconify/node_modules/gulp-svg2png/index.js:49
throw new gutil.PluginError(PLUGIN_NAME, message);
^
Error: Error while converting image.Error: Command failed:

Not sure how to remove this error. Has somebody else this problem?

When running "npm install gulp-iconify --save-dev," it seems to run smoothly until I get to the node-sass module. Then it gives me this warning:

" npm WARN deprecated [email protected]: use node-gyp@3+ instead "

And this error:

" Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/darwin-x64-node-4.1/binding.node "

I'm not sure how related the two are, but I did install the latest version of node-gyp (3.1.0) before I ran the command, and when I visit the raw.githubusercontent url, it just says "Not Found."

Any help I can get on this would be very appreciated. I'm looking forward to iconifying my svgs!

Is it possible to generate the template based on the icon directory as well as the filename? I want to generate my CSS classes using this information, because I may have a file with the same name in two different folders.

Is there any reason why I cannot have source pngs in the same directory as the svgs? I am moving from Grunt/grunticon where this was possible...

Cheers