2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 22:18:24 +00:00
iconify/iconify-icon-demo/ember-icon-demo/app/components/iconify-demo.hbs
2022-05-13 21:29:57 +03:00

55 lines
1.5 KiB
Handlebars

<div>
<section class='icon-24'>
<h1>Usage</h1>
<div>
Icon referenced by name:
<iconify-icon icon='mdi:home'></iconify-icon>
</div>
<div>
Icon referenced by serialised object:
<iconify-icon icon={{this.iconData}}></iconify-icon>
</div>
<div class='alert'>
<iconify-icon icon='mdi-light:alert'></iconify-icon>
Important notice with alert icon!
</div>
</section>
<section class='inline-demo'>
<h1>Inline demo</h1>
<div>
Block icon (behaving like image):
<iconify-icon icon='demo-test'></iconify-icon>
</div>
<div>
Inline icon (behaving line text / icon font):
<iconify-icon icon='demo-test' inline></iconify-icon>
</div>
</section>
<section class='render-demo icon-24'>
<h1>Render modes</h1>
<div>
Default render mode:
<iconify-icon icon='line-md:discord' inline></iconify-icon>
</div>
<div>
SVG:
<iconify-icon icon='line-md:discord' mode='svg' inline></iconify-icon>
</div>
<div>
Background or mask (detects based on presence of `currentColor`):
<iconify-icon icon='line-md:discord' mode='style' inline></iconify-icon>
</div>
<div>
Background (cannot use `currentColor`):
<iconify-icon icon='line-md:discord' mode='bg' inline></iconify-icon>
</div>
<div>
Mask:
<iconify-icon icon='line-md:discord' mode='mask' inline></iconify-icon>
</div>
</section>
<ColorDemo />
</div>