jkphl / iconizr Goto Github PK

Hi guys, I'm sure you've thought about how to achieve pseudo effects that could animate a property of the SVG - rather than a full replacement graphic.

This would require embedding the svg into the html, and some css declaration of said transition. So is probably out-of-scope for the project. But I'm still curious as to what type of thoughts/ideas you have for this?

Thx!

As reported by Manoj via E-Mail (2014-05-04), the web version seems to ignore the opt-out of creating the dimension CSS classes. They will be generated in any case.

Besides generating Sass output, iconizr should also support LESS (as does svg-sprite since release v0.0.8).

At this time, if you're using SASS, Compass is the de facto solution for generated sprite images. There's plenty of other solutions out there but none that are so easy to use or that actually simplifies your workflow.
Unfortunately, Compass is slow. I mean.... REALLY Slow. The solution for SASS is to use libsass which, obviously, doesn't support Compass.

Iconizr seems the perfect solution. It integrates nicely into a grunt workflow, it does the heavy lifting, creates the SASS classes automatically, and has a ton of nice features out of the box.
Unfortunately from what I've seen it's tailored to use SVG source "images", so if we wanted to use PNG source images instead, to generate a generic sprite image (as opposed to icons) we couldn't.

Do you think it will be possible for iconizr to support PNG icons as source images for the sprite?

I set up everything for job. It said me to be patient since 2 jobs in queue.
After several sec the page was updated and it started to count negative seconds. It updated the page and counted negative seconds about 4 or 5 times before it returned me the result archive.

https://www.screencast.com/t/NbksjYDZxX

First i want to thank you, for all your efforts and all your time you have put into this project! :)

I have tried now several .svg, i had even problem with illustrator and wrote a issue there.
The version of my .svg is simply to new nothing seems to be compatible right now, only afinity desginer on ipad, a app for 20 bucks was able to.
So if Illustrator is to dump and a 20 bucks app is capable to keep the compatible formats uptodate, you should be even faster xD

Here a are the SVGs which i tried to use https://github.com/spothq/cryptocurrency-icons/tree/master/svg
I can find it anymore but i thing it is kinda svg version 1.3 even? at least 1.2.

Here if you want to waste your time that illustrator is simple not up to date, also also bugging arround with newest svg.
https://community.adobe.com/t5/illustrator/svg-files-doesn-t-open-correctly-illustrator/m-p/11392589?page=1#M190720

EDIT: I kinda found it now, they called it for sure 1.3 back, I am 100% sure at least at the svg img github repo i posted above.
But seems now it is now baptised to just SVG 2 instead of 1.3 just to make things clearly.
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
Under Development history, 1.2 was dorpped for SVG 2 (maybe internel at the beginning 1.3)
Latest Draft to SVG 2 from may 2020
https://www.w3.org/TR/SVG2/

Hi!

For some time we started to use iconizr(grunt-iconizr) to create sprices of svg and a sprite fallback of pngs(thanks btw).

The problem is that now we have 182 svgs and all of them are launching independent process to convert them to png. This created a fooding of process.

Can this be done with a parallel limit approach? I'm thinking of NUMBER_OF_CPUS * 2.

I have been testing this tool out and it has worked fine until now; I had been using SVG's without a "fill"; but I wanted the icons to be blue. so I added a fill to my SVG icons I loaded in, such as:

<svg fill="##34495e" ...>

...but it seemed to choke on this; whilst it gave me all the folders, the only folder that had anything in it was the css/icons folder, which contained all the separate .svg icons. No .css files, no .scss files and no .png files which I requested.

It turns out that Scour as well as SVGO are prone to errors when served with certain SVG files. At the moment, iconizr fails completely if even one SVG file fails optimizing. This has to be changed immediately.

While I found Scour to be prefered over SVGO (smaller resulting SVG files), it seems to be unmaintained since 2009, so it's unlikely that it's support for problematic SVG files will improve. SVGO could improve over time.

I think I'm going to implement multiple fallbacks: If Scour is available and requested, it will be used for SVG optimization. If it fails, iconizr will look for the presence of SVGO, and use it in case it is available. If even SVGO fails, the unoptimized SVG file will be used.

The documentation mentions compatibility with svgo. But iconizr --help just offers

--scour <string>           Absolute path to scour script for cleaning SVG files (see http://www.codedread.com/scour)

How do I use svgo?

Hi,

first, it's a great tool — thank you so much for doing this.
But then you applied a Creative Commons license for the code which is to say , honestly, not good at all. CC does not really work with code very well and therefore shouldn't be chosen as it causes many problems for users of the software. Read this pieces for more information please:

• http://freear.org.uk/content/creative-commons-licenses-software-just-say-no
• http://wiki.creativecommons.org/FAQ#Can_I_use_a_Creative_Commons_license_for_software.3F
• http://meta.stackoverflow.com/questions/106103/how-can-we-avoid-the-pitfalls-of-creativecommons-in-code-snippets

Please consider to change it to something like MIT (preferred by me) / GPL license if possible. Thank you :)

I put 5 SVG icons with different dimensions (2 icons 19x19 and 3 icons 19x14) and set default icon width and height to 19px and padding to 2px.

In the end of process I got a sprite with original icons sizes (some of them are white):

Maybe my original SVG files cause the problem - I don't know. I'll put several of them here:

19x19 icon:
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 25 25"><svg id="loader" data-name="Layer 1" height="25" width="25" viewBox="0 0 25 25" y="0"><title>spinnerArtboard 1</title><path d="m11.62 21.46a9 9 0 0 1 -8.12 -9.22 9.1 9.1 0 0 1 8.75 -8.74 9 9 0 0 1 9.21 8.12 1 1 0 0 0 1 0.88h1.54a1 1 0 0 0 1 -1.11 12.5 12.5 0 1 0 -13.61 13.61 1 1 0 0 0 1.11 -1v-1.55a1 1 0 0 0 -0.88 -0.99z" fill="#999"/></svg></svg>

19x14 icon:

<!-- Generator: Adobe Illustrator 17.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_flows "http://ns.adobe.com/Flows/1.0/">
	<!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/">
]>
<svg version="1.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" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="18.839px" height="13.724px" viewBox="0 0 18.839 13.724" enable-background="new 0 0 18.839 13.724"
	 xml:space="preserve">
<g id="Layer_8">
	<g>
		<g>
			<path fill="#999999" d="M16.485,1.428c-0.181-0.166-0.474-0.165-0.654,0c-0.181,0.166-0.181,0.434,0,0.6
				c2.778,2.549,2.778,6.697,0,9.246c-0.181,0.166-0.181,0.435,0,0.6c0.181,0.166,0.473,0.166,0.654,0
				C19.624,8.994,19.624,4.308,16.485,1.428z M13.541,3.529c-0.181,0.166-0.181,0.435,0,0.6c1.515,1.39,1.515,3.653,0,5.043
				c-0.181,0.166-0.181,0.435,0,0.601c0.181,0.166,0.474,0.166,0.655,0c1.876-1.722,1.876-4.523,0-6.244
				C14.014,3.363,13.722,3.363,13.541,3.529z"/>
		</g>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#999999" d="M9.704,0.043c-0.129-0.066-0.284-0.055-0.402,0.03L3.454,4.272
			H0.387C0.173,4.272,0,4.446,0,4.66v4.405c0,0.214,0.173,0.388,0.387,0.388h3.067l5.847,4.199c0.067,0.048,0.146,0.073,0.226,0.073
			c0.06,0,0.121-0.014,0.177-0.043c0.129-0.066,0.21-0.2,0.21-0.345V0.388C9.914,0.242,9.833,0.109,9.704,0.043z"/>
	</g>
</g>
</svg>```

Besides generating Sass output, iconizr should also support Stylus.
http://learnboost.github.io/stylus/

Preferable with the different omit settings i.e.:

CSS
a.button {
border-radius: 5px;
}

Omit braces
a.button
border-radius: 5px;

Omit semicolon
a.button
border-radius: 5px

Omit colons
a.button
border-radius 5px

SVG icons with very large dimensions (e.g. 1000 x 1000 pixels) slow down the PNG optimization process dramatically. Iconizr should support settings for maximum width and height (also as a safety measure). Icons exceeding this maximum dimensions should get scaled down appropriately, thus speeding up the conversion process.

As you mention in README, the only difference from Grunticon is file size and requests optimisation, why you just don't implement Grunticon in your service and improve Grunticon as a grunt plugin?

I would like to use this tool to generate SVG sprite with a PNG sprite fallback. I have a SASS mixin that does the job for single images:

@mixin svg-bg($filename, $extension: '.png') {
  background-image: image-url($filename + $extension);
  background-image: none, image-url($filename + '.svg');
}

It works very well an offers a very easy fallback method since ever browser that supports two backgrounds, also supports SVG.

Could this be integrated with iconizr? I would finally solve the messy SVG sprite stuff for me.

At the moment it is impossible to apply the regular state of an icon without implicitly applying it's hover state as well. The regular icon state should be available via a second, independent class name (which has no accompanying :hover pseudo class).

As in svg-sprite, there should be a common option that allows for creating an additional, commonly used CSS class which declares the background-image and background-repeat properties for all single images. Depending on the number of images, this may save a lot of CSS code.

Hey,

I might be missing something, but i cannot seem to get this to produce an svg sprite and a png sprite. Its giving me svg only. My last attempt was this in terminal:

iconizr --png 32768 --out css/png img/svg

So im outputting into "css/png" all the svg's in "img/svg". But its placing an svg sprite, not a png.

From the docs, its seems like iconizr can do both at the same time...

(The svg sprite is great btw)

Please fix it.

As suggested by Simon (#14), the generation of PNG fallback images could be an optional step, effectively leaving the functionality of an SVG sprite generator.

Perhaps I'm just not using iconizr right, but it seems that if you have a situation where the same icon is used at different sizes throughout a website that you have to create a unique SVG for every size so that you also have the appropriately sized PNG fallbacks. But since SVGs cleanly scale it seems redundant to have their data repeated for every size that the icon will be used at. Is there a way to avoid that redundancy?

scour doesn't produce the smallest possible SVG files. They still contain the XML prolog as well as line breaks, which could be omitted.

http://cl.ly/image/383J1K1o2G1r

Are there certain SVG features iconizr doesn't support? Some of my exports come out fine and some are broken (bounding box wrong; or subtract shapes is not applied)

Thank you

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.

There's an error in Sass files created for SVG sprite icons. The suffix -dims (which is used for controlling the size of an icon) is also used for the rule identifying the icon image itself, which renders the whole file pretty useless.

When defining a SCSS Prefix with underscores, for example “_icons-”, the underscore is missing in the downloaded package.

The underscore definition is used to make partial SCSS files.

Hi,

For some reason when I load a SVG (created in inkscape) to iconizr, then the resulting SVG has a maximum width of 300px. Even if the original width is greater than 300px. Although the vertical is scaled accordingly, this is not what I want.

Cheers,
Simon

scour is a Python 2 programming and yields errors when run with Python 3. As iconizr currently just looks for the main Python version available (via which python), this might lead to problems. It should be verified that a Python 2 binary is used.

I'd like to know when is the service comming back?

Similar to CSS pseudo classes, iconizr could natively support Responsive Icons, which means several versions of single icons that depend on screen / device / display metrics. This would require means of expressing the conditions under which a certain icon version should be shown. iconizr would simply have to generate the appropriate CSS media queries around the respective icon versions.

The width and height options, which are meant for SVG images that lack proper dimension settings, are somewhat useless. Applying fixed values for missing properties will always result in distorted images. Nobody wants that. Instead, the real image dimensions should be determined by test rendering the SVG via PhantomJS (like done in svg-sprite). The two options are therefore obsolete and should be removed.

Class for dimensions is long, but there is an easy way to fix it. I would suggest that instead of naming it .icon-name-dims, just name it .icon-name.dims. So output css file would look like:

.icon-arrow,.icon-arrow\:regular{background-image:url('../assets/svg/icons.svg');background-position:0 0;background-repeat:no-repeat}
.icon-arrow.dims{width:22px;height:15px}

and on HTML you could just write down

<div class="icon-arrow dims"></div>

Hello !
I must say I'm a bit confused about the usage of the iconizr's SCSS option outputs.

While you're providing some nice Sass / LESS example, some usage points remains obscure. Or maybe I'm just missing something..?

For exemple, since your exemple is exporting SCSS partials, I guess they're supposed to be included in the main stylesheet, like any partial. But which one to include ? If I want fallbacks, what can I do ? Am i just supposed to choose a stylesheet and include it and voila ? Or is there any way to have the same fallback as the CSS version ?

I guess the loader won't work, since it's designed to pick CSS files, and using partials they're aren't any.

Could anyone please enlighten me ? Is the SCSS outputs capable of providing fallbacks, and if so, how can I use them ? I'd love to be able to extend some icons classes, but without losing the great support iconizr provides !

Thanks a bunch !

As Simon suggested (#14), SVG Cleaner could be a third alternative for SVG file cleaning.

Eventho i untick create dimension classes, it keeps generating them.

It would be desirable to support CSS pseudo classes for icons as well, like e.g. a :hover state. This could be achieved by simply including the pseudo class in the icon filename. In theory, this does already work, but only as long as you upload your icons from a Linux platform (or any other platform that supports colons in file names, which isn't allowed under Windows and OS X). Therefore iconizr should support a substitution character to denote pseudo classes.

Latest release of module iconizr on npm is version v0.2.2 (last updated 3 months ago).
Could you publish the latest release to npm (v1.0.2)?.