PNG sprite isn't being created

[richardwestenra]

I want to output a single SVG sprite, PNG sprite and a CSS file with background positions for each of the 150-odd icons that I'm using.

I'm running the script in OSX and it's not creating a PNG sprite. It does make the CSS files with the PNGs as data URIs, but that's not what I'm after.

I tried replicating the weather example with the same command as in the readme, and the same thing happened: It doesn't create the PNG fallback.

[jkphl]

Hi @richardwestenra,

could you

1. please post your full configuration / command line command,
2. add the -v switch to increase logging (if not done already).

Unfortunately, the PHP version of iconizr is really old and outdated. It doesn't provide proper debugging features. It sounds, however, as one of the optimizing tools on your system doesn't work properly (although it's probably there, otherwise it'd be skipped ...).

Cheers, Joschi

[richardwestenra]

Cheers. Yeah, I tried svg-sprite and grunt-svg-sprite (which would have been ideal) but they don't appear to create the PNG fallbacks.

Steps to reproduce:

1. I'm using OSX 10.11.1 and the built-in version of PHP which is 5.5.29.
2. Duplicate example folder and delete everything in it except the weather directory.
3. Run php ../iconizr.phps -c weather -s weather -dkv -o css --sassout sass weather

Terminal output:

Processing icon directory "weather"
Processing SVG icons ...
Creating SVG single image CSS rules
Creating SVG single image Sass rules
Creating SVG data URI CSS rules
Creating SVG data URI Sass rules
Creating SVG sprite
Creating SVG sprite CSS rules
Creating SVG sprite Sass rules
Processing PNG icons ...
Creating the stylesheet loader fragment

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /Users/.../iconizr/iconizr.phps on line 625
Creating the icon kit preview documents

Result: The css and sass directories are created. css contains a weather subdirectory which contains a bunch of SVG files including an SVG sprite, but no PNGs.

[jkphl]

@richardwestenra Glad to hear that you are a Node / Grunt guy, because then I'd really really recommend using grunt-iconizr (respectively node-iconizr) instead. It's based on svg-sprite and far more capable than the outdated PHP version! In case you're switching, please make sure to use the dev-branch as the master branch is not based on the latest svg-sprite generation. The downside is that the latest grunt-/node-iconizr is only poorly documented so far, as I'm so desperately lacking time ... Please refer to this README for the most accurate documentation available right now. Hope this helps to overcome your problems‽

[richardwestenra]

@jkphl Unfortunately neither grunt-iconizr nor node-iconizr will install on my computer - I assume it's due to this issue.

In the end, my colleague (who I have been assisting with his project) got it working using the web version - apparently it ran all 147 icons even though it's supposed to only support 50 at a time. Hence I no longer need it to work, this time. Ultimately, it'd be nice to have a working node/grunt version which supports PNG and SVG sprites, because I think this is the best implementation I've seen.

[jkphl]

@richardwestenra Are you sure you tried to install the dev branch version? The master branch version is based on an old svg-sprite architecture which had some problematic dependencies (at least for osx) ...

[richardwestenra]

@jkphl Sorry yeah I just remembered to check that after posting the comment. Giving it a shot now!

[richardwestenra]

@jkphl Yep that worked perfectly for getting it to install - nice one!

I'm getting a new error when trying to run grunt-iconizr though:

Running "iconizr:dist" (iconizr) task
Warning: Unable to read "/Users/.../input" file (Error code: EISDIR). Use --force to continue.
Aborted due to warnings.

using these settings:

iconizr: {
  dist: {
    expand: true,
    src: 'input',
    dest: 'output',
    options: {
    }
  }
}

I'm conscious however that this is a different issue and that I'm taking up a lot of your time for a non-urgent issue. If you see anything obvious that I've missed then I'd welcome your assistance but please don't go to too much trouble on my behalf.

[jkphl]

@richardwestenra No problem. This kinda is my job, right? (At least, this is what one could expect when pushing an open source lib out the door ...)

I think you need some more values inside options. At least there should be the icons subkey. The following is an example configuration of one of our production environments (Gruntfile.js, shortened for the sake of brevity):

module.exports = function (grunt) {
    grunt.initConfig({
        iconizr: {
            dist: {
                src: ['**/*.svg'],
                dest: 'fileadmin/project',
                expand: true,
                cwd: 'fileadmin/project/.templates/icons',
                options: {
                    log: 'info',
                    shape: {
                        dest: 'icons',
                        spacing: {
                            box: 'icon'
                        },
                        dimension: {
                            maxWidth: '100',
                            maxHeight: '100'
                        },
                        transform: [
                            {svgo: {plugins: [{convertPathData: false}]}}
                        ]
                    },
                    icons: {
                        dest: 'css',
                        prefix: '.icon-%s',
                        common: 'icon',
                        dimensions: '-dims',
                        layout: 'vertical',
                        sprite: 'icons/icons.svg',
                        render: {
                            scss: {
                                dest: '../.templates/sass/noconcat/_icon'
                            }
                        },
                        bust: false,
                        preview: 'icons/preview',
                        loader: {
                            dest: 'js/icons-loader.js',
                            css: 'icon.%s.min.css',
                            type: 'js',
                        }
                    }
                }
            }
        }
    });
};

Here is a list of all possible properties. Hope this helps to get you going! :)