We introduced SVG icons in version 3.9.0, replacing font icons. The style properties of icon, like fontSize and color We decided in favour of the centering in the unknown CSS hack.Import React from 'react' import Icon, / > ) export default App It makes the SVG element blurry on non-retinaĭevices (even with transform-style: preserve-3d), leads to painting issues on some Android stockīrowsers and IE11 has issues when text direction, offset and transform are combined. Centering SVG file with transform.Ĭentering SVGs using transforms is very “unpleasant”. Icons (around 1KB) as background images that were merged with our main CSS in order to avoid anĪdditional request. Keeping a small set of icons as background images.Įlements like select should have icons as a background-image and therefore we kept a small set of All of these files had to be cleaned up,Īs they were going to be inlined and these styles were affecting other icons colours. Some icons exported from Sketch and Illustrator contained the same ID attribute, inlined CSS, styleĬlasses and other junk, even after being through the SVG optimizer. ![]() ![]() Non-supported browsers.icon-iconname Sketch and Illustrator exports. Occurrences in our markup to use the new SVG icons as background images and to have a PNG fallback for Remove around 800 icons and more than 2000 background-positions from the stylesheet. The decision was made to use SVG icons embedded as data URIs in CSS (see listing below), with an embedded PNGįallback which we built with grunticon. Will explain our reasoning behind this decision and how it improved maintainability and website performance. Around a year ago, in our large scale refactoring projectĪlso known as Project Ironman, we stepped away from image sprites that we used for our icons.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |