mirror of
https://github.com/iconify/iconify.git
synced 2024-12-13 22:18:24 +00:00
55 lines
1.5 KiB
Handlebars
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> |