ICONS - How to handle SVG explained

[hanakin]

its an issue with svgs as well as it depends on weather they are designed to the center of the viewbox vs the bottom of the viewbox ... fa is designed at the bottom vs mdi which is designed to the center.

[Arty]

Of course.

When using FA it happens very often that icon needs custom alignment. Same will be with SVG. That is why framework doesn't assume anything and shows icons as is... with exception of colors and width/height values. It is a minor issue of old icons that are designed to be handled as fonts.

But these fonts are moving forward too. FontAwesome 4 is designed to be used as font, FontAwesome 5 is done properly as collection of SVG without extra spacing below icon for text alignment.

[hanakin]

right just was wondering as most icon frameworks are very self serving and make up there own rules...they never play very well with each other

[Arty]

I've improved script a lot since last post:

- Images imported from fonts are now cropped by up to same amount that is displayed below baseline, so images no longer have extra spacing. Images that go below baseline will not have part of them cut out.

- Component for searching icons is available: https://simplesvg.com/test/search.html
It is still in testing, but it seems to work fine. There are 2 samples on that page: one that searches all collections, one restricted to Emoji One collection. Component is flexible and customizable. It can be used to allow users to insert custom icons, such as custom forum icons or (as shown in sample) emoji selection.

- When dimensions aren't specified or height is set to 1em, icons imported from fonts are adjusted to inline mode. Vertical-align is set to baseline setting from font, so glyph goes slightly below baseline, just like if it was rendered as font.

Test it on this very forum. Write these 2 lines of code in browser console:

Code: Select all

$('.icon').addClass('fa');
$('body').append('<script src="//cdn.simplesvg.com/js/?plugins=fa"></script>')

and all icons on page will be replaced by SVG from SimpleSVG framework. See how it works compared to font.

[hanakin]

hmm slight issue with the dropdown arrows...

[Arty]

hmm slight issue with the dropdown arrows...

It is caused by this in buttons.css

Code: Select all

.caret i {
	vertical-align: top;
}

Adding .caret svg to it won't do much because <svg> element has vertical-align in style, so to customize vertical alignment of such icons you need to add !important:

Code: Select all

.caret i, .caret svg {
	vertical-align: top !important;
}

Or remove alignment completely. Issue with that icon is its below middle of text, so centering it vertically requires some hack, for both font and svg. Instead of messing with alignment you can move it. This solution should work for both <i> and <svg>

Code: Select all

.caret i, .caret svg { position: relative; top: -3px; }

Or replace it with icon that does not require messing with alignment:

Code: Select all

<span data-icon="vaadin-caret-down" class="simple-svg" data-width="1.2em" data-height="1em"></span>

width/height can be moved to css

[hanakin]

thats what i figured just was not sure

[Arty]

SVG framework has been improved a lot in last few months.

Check it out: https://simplesvg.com/
Website has icon finder to browse all available icons and documentation, though documentation section is not complete yet.

Many bugs have been fixed, many improvements to code.

[Vinny]

SVG framework has been improved a lot in last few months.

Check it out: https://simplesvg.com/
Website has icon finder to browse all available icons and documentation, though documentation section is not complete yet.

Many bugs have been fixed, many improvements to code.

It seems interesting, great job.

[hanakin]

Is it cacheable? Though if I have a page with 100 + icons that has to go through this every load I’m wondering the cost?