jkphl / grunt-iconizr Goto Github PK

After generation see this code

.i-weather-storm:hover,
.i-weather-storm\:hover

What means this \: ?

For example i want to use 'no bleeding' sprites solution: http://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/#crayon-53277bda9edc2669032852 .

I should use :before on every generated sprite class, but for this i need name all(!) images with ~before postfix.

Is there any chance (or suggest other solution) to add default postfix, so then i'll have "clear" SVG names instead of tens 'abcdbefore.svg, efghbefore.svg, ...'?

Hi,
I tried grunt-iconizr with 10 SVG 100x100 pixels, which gave me a output sprite of 100x1000 pixels !
Is it possible to config the output sprite's dimensions with a multiplier of 0.75 for example, in order to have a 75x750 pixels output sprite ??
If yes, how to do that ?
Thanks in advance.
PS: Sorry if i post on the wrong place.

Probably something stupid I'm doing but what should the value of render option be to get inline svg? I can't seem to generate sprite.inline.svg Nor when specifying html:true am I getting any sprite.html. have tried a mixture of things but not getting it working yet

grunt.initConfig({
    iconizr: {
      your_target: {
        src: 'src/svg',
        dest: 'src/iconizr',
        options: {
          render: "inline",// tried 'html', 'inline', 'inline.svg'
          'inline.svg': true,// tried with and without this
          html: true,
          preview: "preview",
        },
      },
    },

In case it's related in the sprite-preview.html generated, the icons don't appear (but in the other preview files they do)

.

First is a tiny thing that could be fixed:

If I overwrite the existing template in node_modules/grunt-iconizr/node_modules/iconizr/tmpl/sprite.scss and don't delete the existing sprite sheets in the destination folder, the new template changes are not picked up. This made me think it wasn't working altogether. Once I deleted the folder contents it started to get picked up again.

When using the SASS renderer, the output .scss file doesn't actually use the spritesheet:

iconizr:
    dist:
        src: ['src/img/test/']
        dest: '<%= pkg.deployPath %>/img/svg/'
        options:
            level: 0
            verbose: 1
            prefix: 'icon'
            render:
                css: false
                scss: '_icons'

_icons-svg-sprite.scss:

.icon-arrow-black {
    background-position: 0 0;
    @extend %icon;
    # data URIs instead of spritesheet reference
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22h<etc>");
}

# etc

Is this intended?

Locally all is Ok, but when i run it on TravisCI i got errors.
Do 'grunt-iconizr' has some system software requirements?

>npn install --loglevel info:

...
npm info postinstall [email protected]
npm ERR! cb() never called!
npm ERR! not ok code 0
...

how PNG files can be processed on mixed(SVGs+PNGs) src folders?

as i see need to add new function for simple copy right after function Iconizr.prototype._svg2png

similar project "Grunticon" can do this...

I'm using this in sass and rather than loading 2 css files I'd rather just split with modernizr and use a mixin to output the code. Is there way I can use different selector/variable in the 2 png and svg sprite scss files so they don't conflict?

Hi,

I just can’t figure out how to make use of a custom mustache template for the .scss file/s. Is there a way to do that? Or can you use custom templates just for plain CSS files?

When I run the iconizr task, the SVG and PNG sprites get created successfully, but it doesn't create the CSS or SASS.

In the terminal it says the following: { [Error: spawn ENOTDIR] code: 'ENOTDIR', errno: 'ENOTDIR', syscall: 'spawn' }

Hi Great Plugin! Just two questions:

I have created a custom template which works beautifully. But it still outputs 4 stylesheets, my custom one and then 3 others, Is there anyway for it to only output my custom template and non of the others?

Then Also, if i set it to output to 'liveload/img' it creates an additional folder called 'icon', is there any way to not create the additional folder?

Here is my current configuration:

iconizr: {
            options: {
                // Task-specific options go here.
                dims    : true,
                common: 'img',
                recursive: true,
                render    : {
                    css     : false,
                    scss    : {
                        template    : 'config/sprite.hbs',
                        dest        : '../../compass/source/_icons.scss'
                    }

                },
                variables   : {
                    png: function() {
                        return function(sprite, render) {
                            return render(sprite).split('.svg').join('.png');
                        }
                    }
                }
            },
            bsWatch: {
                src         : ['iconizr/source'],
                dest        : 'liveload',
            }
        }

i am using bsWatch task currently.

Any Help would be Greatly Appreciated.

iconizr: {
  svg2sprites: {
    src: ['<%= conf.bg.images %>/svg'],
    dest: '<%= conf.bg.styles %>/_iconizr',
    options: {
      prefix: 'bg',
      verbose: 3,
      render: {
        css: false,
        scss: '.',
      } // render
    } // options
  } // svg2sprites
} // iconizr

Result:

<script type="text/javascript">!function(){var e=window,t=e.document,a=arguments,n="createElementNS",s="http://www.w3.org/",A="svg",r=function(e){var r=t.getElementsByTagName("script")[0],g=t.createElement("link");g.rel="stylesheet",g.type="text/css",g.href=a[4]+a[1*e|2*(t[n]&&t[n](s+"2000/"+A,A).createSVGRect&&t.implementation.hasFeature(s+"TR/SVG11/feature#Image","1.1"))],r.parentNode.insertBefore(g,r)},g=new e.Image;g.onerror=function(){r(0)},g.onload=function(){r(1===g.width&&1===g.height)},g.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}("bg-png-sprite.css","bg-png-data.css","bg-svg-sprite.css","bg-svg-data.css","/eomdb/SysConfig/WebPortal/BostonGlobe/Framework/styles/_iconizr/");</script><noscript><link href="/eomdb/SysConfig/WebPortal/BostonGlobe/Framework/styles/_iconizr/bg-png-sprite.css" rel="stylesheet" type="text/css" media="all"></noscript>

Note the file names in the tester are bg-png-sprite.css, etc. based on the specified prefix. But the actual source files are called _iconizr-png-sprite.scss, etc. which seem to get their prefix from the parent directory. Also, with the leading underscore, they wouldn't get turned into individual files.

Additionally, all of the scss files get placed one level behind the one specified in dest. So _iconizr-png-sprite.scss gets put under styles, with the background values set to url(icons/icons.png);. But the icons folder is within _iconizr, not styles.

$ grunt test
Running "clean:tests" (clean) task
Cleaning "tmp"...OK

Running "iconizr:default_options" (iconizr) task
Creating SVG sprite from 12 files (directory "........./test/fixtures") ...
phantom stderr: execvp(): No such file or directory

Looks like grunt can't find binaries? or running 'phantom' instead of 'phantomjs'?

To solve this i've installed phantomjs binaries for ubuntu (sudo aptitude install phantomjs)

Hi @jkphl .

If there any option for generating png sprites with 2x, 3x sizes ?

Thanks.

Hey,

The Iconizr task kept freezing so I managed to debug it and I got:
{ [Error: spawn ENOENT] code: 'ENOENT', errno: 'ENOENT', syscall: 'spawn' }

Have you ever come across this?

Thanks

Problem: http://recordit.co/q9h3Ay7iwu

My config: https://gist.github.com/jepek/a2521a122e90cf554386

Anyone have idea what's wrong?

Really keen to give this a whirl. The related svgsprite works fine so I'm certain this is something to do with the PNG tools needed to optimise PNGs.

I'm unable to install via the usual command sudo npm install grunt-iconizr --save-dev

The install fails. Rather than paste in the body of this issue I have created a Gist: https://gist.github.com/benfrain/9690635

Any pointers workarounds appreciated.

Hi

I am using Mac OS 10.9.5.
I had an issue while installing with grunt.

> [email protected] install /private/var/www/js-client-ui/node_modules/grunt-iconizr/node_modules/iconizr/node_modules/svg-sprite/node_modules/phantom-sync/node_modules/phantom/node_modules/dnode/node_modules/weak
> node-gyp rebuild

  CXX(target) Release/obj.target/weakref/src/weakref.o
  SOLINK_MODULE(target) Release/weakref.node
  SOLINK_MODULE(target) Release/weakref.node: Finished
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "grunt-iconizr" "--save-dev"
npm ERR! node v0.10.36
npm ERR! npm  v2.3.0
npm ERR! path /private/var/www/js-client-ui/node_modules/grunt-iconizr/node_modules/iconizr/node_modules/pngquant-bin/node_modules/bin-build/node_modules/decompress/node_modules/decompress-unzip/node_modules/strip-dirs/node_modules/is-absolute
npm ERR! code EMFILE
npm ERR! errno 20

npm ERR! EMFILE, readdir '/private/var/www/js-client-ui/node_modules/grunt-iconizr/node_modules/iconizr/node_modules/pngquant-bin/node_modules/bin-build/node_modules/decompress/node_modules/decompress-unzip/node_modules/strip-dirs/node_modules/is-absolute'

Now it just generates the svg and png files but no CSS nor HTML, with the error:

{ [Error: spawn ENOENT] code: 'ENOENT', errno: 'ENOENT', syscall: 'spawn' }

npm version : 2.3.0
grunt version : 0.4.5
node version: 0.10.36

Thank you for your help

As a project grows, the PNG creation mechanism can take a while to process. As a method of streamlining the dev workflow, it is possible to bypass the PNG sprite creation, but still get iconizr to generate stylesheet resources?

Is there a way to get the image dimensions without having to add an additional class to the markup?

At the moment the css looks like this (with dims set to true):

.icon-star { 
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url(icons/icons.svg);
}

.icon-star-dims {
  width: 32px;
  height: 32px;
}

What I would like is this:

.icon-star { 
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url(icons/icons.svg);
  width: 32px;
  height: 32px;
}

Per #4, I ran sudo npm update npm -g, to no avail.

npm-debug.log (which I cleared prior to install): https://gist.github.com/hguiney/cefde690e7e62f6b5941

After sudo npm install grunt-iconizr terminal outputs me this errors:

gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:269:23)
gyp ERR! stack     at ChildProcess.emit (events.js:110:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:1074:12)
gyp ERR! System Darwin 14.4.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Work/Targi_Smaku/node_modules/grunt-iconizr/node_modules/iconizr/node_modules/svg-sprite/node_modules/phantom-sync/node_modules/phantom/node_modules/dnode/node_modules/weak
gyp ERR! node -v v0.12.3
gyp ERR! node-gyp -v v2.0.1
gyp ERR! not ok 
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.3
npm ERR! npm  v2.12.1
npm ERR! code ELIFECYCLE

npm ERR! libxmljs@0.8.1 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the libxmljs@0.8.1 install script 'node-gyp rebuild'.
npm ERR! This is most likely a problem with the libxmljs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls libxmljs
npm ERR! There is likely additional logging output above.

I'm using:
OS X 10.10.4
npm 2.12.1
phantomjs 2.0.0
grunt 0.4.5
grunt-iconizr 0.2.3

npm-debug.log -> https://gist.githubusercontent.com/dawidk92/1d333f13d77a6c3ed9e6/raw/gistfile1.js

Hi,
I've managed to lose my grunt-iconizr install, and can't get it back.
It fails to compile and I've tracked down the problem to a couple of dependencies.
Specifically, [email protected] which has problems with node-gyp rebuild. This is quite an outdated version of weak and later versions have no problems compiling. This seems to be a dependency of dnode, which itself is a dependency of: phantom<----phantom-sync<----svg-sprite<----iconizr<----grunt-iconizr.
Anything I can do to solve this and get iconizr back?

Related: I used to have phantomjs192 installed in the system, and phantom-sync installed globally. This was the only way of getting iconizr to install. Phantom-sync is no longer happy with 1.9.2 and requires a later version (1.15+). This is fine, but it means it will install phantomjs in node directly (giving me problems with libxmljs) or if I upgrade phantomjs, phantom-sync fails to install globally (giving me the above issues ( [email protected] from dnode).
This is a bit of a dependency nightmare, but everything was fine a few days ago....

Hi,
is there the possibility to set the url of the sprite in the background-image attribute?

Example, with these settings:

iconizr: {
    options: {
        common: "icon",
        spritedir: '.',
        render: {
            css: false,
            scss: '../scss/sprite/_sprite'
        }
    },
    sprite: {
        src: 'svg',
        dest: 'img'
    }
}

I get:

.icon {
    background-image: url(icons.svg);
}

But I'd rather have:

.icon {
    background-image: url(../img/icons.svg);
}

Since the scss partial is compiled in an app.css in a css folder.

Thanks,
Alberto

Hi,

I have problem installing the grunt-iconizr plugin in my windows 7 machine. I get error when I try installing via npm install grunt-iconizr --save-dev.

Following is the error I get:

My system configuration is:

Windows 7 64 bit
.NET Framework 4
Visual Studio 2010
Grunt 0.4.5

Please help!

I tried running grunt-iconizr on some SVGs a designer was sending me and it throws an unexpected start tag error.

I believe it's because Adobe Illustrator adds a bunch of XML content.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 85.3 85.4"
 enable-background="new 0 0 85.3 85.4" xml:space="preserve">
...

Is there anyway we can get grunt-iconizr to work with this? Or if people have workarounds, maybe I am just doing something wrong. Would love to incorporate this in our workflow. Thanks a bunch.

Hello,

I'm getting the Error "Fatal error: Unterminated string constant" after "Building loader resource".

My gruntfile.js:

'use strict';

module.exports = function(grunt) {

    grunt.initConfig({
        iconizr: {
            dist: {
                src: ['**/*.svg'],
                dest: 'output',
                expand: true,
                cwd: 'svg',
                options: {
                    'dest':'output',
                    'log': 'verbose',
                    'mode': {
                        'css':true,
                        'view':true,
                        'defs':true,
                        'symbol':true,
                        'stack':true
                    },
                    icons: {
                        render: {
                            scss: {
                                dest: 'test2'
                            }
                        }
                    }
                }
            }
        },
    });

    grunt.loadNpmTasks('grunt-iconizr');

};

Here is the output from command line:

D:\tmp\iconizr>grunt iconizr:dist
Running "iconizr:dist" (iconizr) task
2015-05-11 15:59:21 - verbose: Initialized iconizr configuration
2015-05-11 15:59:21 - verbose: Initialized spriter configuration
2015-05-11 15:59:21 - info: Created spriter instance
2015-05-11 15:59:21 - info: Created iconizr instance
2015-05-11 15:59:21 - verbose: Added shape "logo:regular"
2015-05-11 15:59:21 - info: Compiling 1 shapes ...
2015-05-11 15:59:21 - info: Laying out «css» sprite («css» mode)
2015-05-11 15:59:21 - verbose: Created «css» SVG sprite file («css» mode)
2015-05-11 15:59:21 - info: Laying out «view» sprite («view» mode)
2015-05-11 15:59:21 - verbose: Created «view» SVG sprite file («view» mode)
2015-05-11 15:59:21 - info: Laying out «defs» sprite («defs» mode)
2015-05-11 15:59:21 - verbose: Created «defs» SVG sprite file («defs» mode)
2015-05-11 15:59:21 - info: Laying out «symbol» sprite («symbol» mode)
2015-05-11 15:59:21 - verbose: Created «symbol» SVG sprite file («symbol» mode)
2015-05-11 15:59:21 - info: Laying out «stack» sprite («stack» mode)
2015-05-11 15:59:21 - verbose: Created «stack» SVG sprite file («stack» mode)
2015-05-11 15:59:21 - info: Laying out «icons» sprite («view» mode)
2015-05-11 15:59:21 - verbose: Created «icons» SVG sprite file («view» mode)
2015-05-11 15:59:21 - verbose: Returning 1 intermediate SVG files
2015-05-11 15:59:21 - info: Finished «css» + «view» + «defs» + «symbol» + «stack» + «icons» sprite compilation
2015-05-11 15:59:21 - info: Created 7 x SVG
2015-05-11 15:59:21 - verbose: Created css\svg\sprite.css-9ffab087.svg: 2.5 kB
2015-05-11 15:59:21 - verbose: Created defs\svg\sprite.defs.svg: 2.5 kB
2015-05-11 15:59:21 - verbose: Created icons\icons-400091cf.svg: 2.6 kB
2015-05-11 15:59:21 - verbose: Created logo.svg: 2.5 kB
2015-05-11 15:59:21 - verbose: Created stack\svg\sprite.stack.svg: 2.6 kB
2015-05-11 15:59:21 - verbose: Created symbol\svg\sprite.symbol.svg: 2.5 kB
2015-05-11 15:59:21 - verbose: Created view\svg\sprite.view-400091cf.svg: 2.6 kB
2015-05-11 15:59:21 - info: Creating PNG fallbacks
2015-05-11 15:59:24 - info: Optimizing PNG fallbacks
2015-05-11 15:59:28 - verbose: Shrinked "logo.png" to 120 Bytes (23.9%)
2015-05-11 15:59:28 - verbose: Shrinked "icons-400091cf.png" to 120 Bytes (23.9%)
2015-05-11 15:59:28 - info: Building dataURIs
2015-05-11 15:59:28 - info: Building stylesheet resources
2015-05-11 15:59:28 - verbose: Created a «svg-data-uri» strategy «scss» stylesheet resource
2015-05-11 15:59:28 - verbose: Created a «svg-sprite» strategy «scss» stylesheet resource
2015-05-11 15:59:28 - verbose: Created a «fallback-data-uri» strategy «scss» stylesheet resource
2015-05-11 15:59:28 - verbose: Created a «fallback-sprite» strategy «scss» stylesheet resource
2015-05-11 15:59:28 - info: Building loader resource
Fatal error: Unterminated string constant

My Environment:
node v0.12.4
npm v2.11.1
Windows 7
grunt v0.4.5
grunt-cli v0.1.13

PS: Maybe it is some disconfiguration because of the lack of documentaion. And because I know your are busy, don't feel pushed! Thanks.

Is there any chance to see gulp version of this tool soon?

with option 'verbose=3'

$ grunt test
Running "clean:tests" (clean) task
Cleaning "tmp"...OK

Running "iconizr:default_options" (iconizr) task
Creating SVG sprite from 12 files (directory "/home/nzz/projects/ic/test/fixtures") ...
Creating PNG versions of 13 SVG images (including the sprite) ...
...
Optimizing 13 PNG images (including the sprite) ... 
 · Optimized PNG image "icons.png" ... ERROR
{ [Error: spawn ENOTDIR] code: 'ENOTDIR', errno: 'ENOTDIR', syscall: 'spawn' }
 · Optimized PNG image "weather-clear.png" ... ERROR

something wrong with PNG optimizations, maybe some CLI PNG tools dependency?

like this: http://pauginer.github.io/invisible-gradient-technique/

I'm already baking a new less template but haven't figured out how to address the sprite's png file from the template.

Wondered if it would be difficult/worthwhile to provide a 'packed' layout option alongside the others?

Whereby each image just take the available space alongside the other images (creating the smallest/most compact image sprite).