Tag (from a field)
The Iconamic tag makes it easy to inject an SVG icon in to your markup from a field.
From v1.0.3, you can also manually inject an icon.
Inject an icon
The Iconamic tag will look for a field handle of "icon".
1{{ iconamic }}
If an icon cannot be found, Iconamic will fail silently: the last thing we want is for your site to unexpectedly have an exception thrown.
You can also pass a handle
parameter to specify a specific field to use:
1{{ iconamic handle="my_iconamic_icon" }}
If typing 'handle' is too much, you can also do this:
1{{ iconamic:my_iconamic_icon }}
These are looking for the icon name from a field with the handle my_iconamic_icon
.
Check if an icon exists
Iconamic comes with a handy has
helper that returns a boolean response. This is really useful if you want to check if an icon exists before outputting any markup, or want to hard-code a default icon (in the event of an optional field, or missing icon) in your own antlers file.
1<!-- Check if the icon exists -->2{{ if {iconamic:has} }}3 <!-- Output a wrapper -->4 <div class="w-8 h-8">5 <!-- Inject the icon -->6 {{ iconamic }}7 </div>8{{ /if }}
You can also use the handle
parameter to look for a field other than 'handle':
1<!-- Check if the "my_iconamic_icon" exists -->2{{ if {iconamic:has handle="my_iconamic_icon"} }}3 ...4{{ /if }}