![]() Icon prefix is first few letters in name of icon before first "-", such as "fa" in "fa-home". All you need to do is host your own CDN for your icons and add one line of code to make SimpleSVG load icons with your custom prefix from your server. Can SimpleSVG be used with premium icon sets? Yes.More details on that will be added later. Or instead of hosting, you can append icons to page as script. Tools for hosting custom CDN are already available on GitHub. Tools for creating custom sets will be published within next few weeks. Want to create your own icons set? It is possible.Downside is you need to specify color in URL because backgrounds cannot inherit color from DOM element. ![]() CDN can generate SVG images that you can use as background in stylesheet. Want to use SVG as backgrounds? It is possible.Currently plugins are available for FontAwesome, Icalicons and PrestaShop icons. Migrating from glyph font? There are several plugins available that lets you use SimpleSVG without changing code.Though currently it is not a proper CDN, its basic hosting provided by me. 100 icons takes only 15-20kb (sometimes more, sometimes less - depends on complexity of shapes of those icons). One HTTP(S) request can load several icons at the same time without SVG overhead, so it loads fast and uses less bandwidth. Icons are loaded in bulk from CDN as JSON data, which contains only shapes, width and height.More details on that will be posted later. There is also option to set custom dimensions using width and height attributes. You don't need to worry about dimensions of original SVG icon, SimpleSVG will take care of everything for you. To change icon height you need to set different font-size. Icons are automatically scaled down to current font size and aligned to baseline, just like glyph fonts.It works just like glyph fonts: to change color you need to set color in stylesheet using something like "color: red". Monotone icons inherit color from stylesheet.What makes SimpleSVG different from inserting SVG into document: No more blurring because of font rendering settings. Icons are rendered exactly the same in all browsers.Icons will be displayed exactly the same for all visitors, regardless of their browser and operating system. Using SimpleSVG you can use any or all of those emoji sets on same page. Emojis! Default collection includes several emoji sets: Emoji One, Firefox Emoji, Noto Emoji, Twitter Emoji.Over 20,000 premade icons to choose from, including FontAwesome, MDI, Entypo+ and many other collections.Glyph fonts load entire fonts, SimpleSVG loads only icons that are used on page. What makes SimpleSVG different from glyph fonts: Add one line of code to page, preferably before :įor list of available icons see search form in "Samples" section below. It is SVG framework that works similar to glyph fonts, but without glyph fonts downsides. First it was a project designed for my own styles, but later it grew into a bigger separate project that I decided to release as open source. So I wrote a library that solves all those issues. Glyph fonts are - just plug it in, write few lines of code and that's all. Preload SVG into DOM? Every image will be loaded on each page load, often multiple times per page (not all browsers support sprites). ![]() That makes external SVG images very hard to use. That means each SVG image has to be stored separately.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |