Multiple Outputs

[littlefyr]

It is a rare thing to need only a single rendering of a set of images. Its highly likely that one would need, at a minimum, more than one colour set for a set of icons. For example, enabled vs. disabled states. Its not clear from the documentation how you would accomplish that short of duplicating all your images.

And as already mentioned in #1, having a highDPI version of an icon is useful in many case (and not just websites, Android apps have 5 possible DPI settings). This a different problem than Iconic's 3 versions of the same icon for different sizes. If I'm going to have a small icon I should use the appropriate icon in order to be visually legible, but I still want to have it rendered at the highest DPI available to the device.

There is also a possibility to use this with non-icon svgs. Again with Android as an example, I'm going to want to have a splash screen. In this case I'm going to need to render the same image in two different orientations, but with two different aspect ratios (at a minimum) for phone vs. tablet... and then at different DPI values. This is not only a mobile app issue, of course, I might want to do something like this to give me different views of some image for the srcset attribute or if I'm doing some art direction using the <picture> tag.

I think that something like the following would express all the required use cases. It would assume that the colorize option is not used.

files: [{
    expand: true,
    cwd: 'src/icons/',
    src: '**/*.svg',
    className: 'class-to-add-to-svg',
    fileName: '<%=files.src.filePathAsString('-').toLowerCase() %>-<%=files.className%>',
    out: [{
        className='<%=files.className%> mdpi'
        dest: '/res/mdpi/'
    }]
}]

where fileName and className could be defined in both the files object and the out object.

The main idea is that the className would be added to the outer SVG and then one could use the classnames to decide the dimensions and any other properties of the resulting image.

[littlefyr]

It occurs to me that simply adding classname and filename to the existing object for files would be sufficient. You could avoid too much repetition by using some version of extend(). It is, after all, a javascript file.