The icons Jade mixins require the platform as the first parameter in order to determine whether to output anything or not.
Icons controls depend on an SVG definition file (e.g. dist/svg/web.svg) existing within the HTML content of the page. It could be added after XHR request like in this demo (check source of frame).
Outputs only for the lg and sm platforms.
each i in icons
+icon('lg', i)
|
Icons controls depend on an SVG definition file (e.g. dist/svg/web.svg) existing within the HTML content of the page. It can be inlined in the HTML response like this demo.
Outputs only for the lg and sm platforms.
each i in icons
+icon('lg', i)
| each i in icons
+icon('lg', i).is-s
| each i in icons
+icon('lg', i).is-l
| each i in carBody
+icon('lg', i).is-car
|
each i in stroked
+icon('lg', i).is-l.is-stroke
| a(href='#')
| Foo Bar
+icon('lg', 'arrow-r')
p
+icon('lg', 'add').is-spaced
+sprite('web', 'add').is-spaced
| Foo BarThese icons are intended to be used for xs platform only. They are less flexible than the other ones, since they need all the different styles for an icon to be defined in the SVG sprite.
each i in webSprite img(src='/png/web/icons/' + i + '.png').ui-sprite | = i br each i in carBodySprite img(src='/png/car-body/icons/' + i + '.png').ui-sprite | = i br
each i in icons
+icon('lg', i).is-v-center
img(src='/png/web/icons/' + i + '.png').ui-sprite.on-xs-inline.is-v-center