Icon Libraries
Various libraries from in-house and 3rd parties.
This instructions were specific to projects built with php, Leerburg's primary language.
Combine path variable (declared in php) with icon name to indicate which icon you want to use (ex: from core icons, #icon-home = ). The value of $SVG_PATH is stored in the header or a config spot, and corresponds to the location of core-icons.svg and optional ?v= for versioning after file changes (ex: "/images/core-icons.svg?v=01"). Depending on the project, an icon pack outside of Nitro may be required (for logos and custom icons).
For accesibility, svg's must now have role="img" and an aria-label.
Some icons may need to be rotated, for them the classes are .icon_rotate90, .icon_rotate180, and .icon_rotate270.
Read the documentation on Buttons to see how to use icons with text or alone in a button.
<!-- basic icon -->
<svg class="icon" role="img" aria-label="icon description">
<use href="/images/core-icons.svg#icon-name" />
</svg>
<!-- with class for changing color of an icon (single color icons) -->
<svg class="icon icon_fill" role="img" aria-label="icon description">
<use href="/images/core-icons.svg#icon-name" />
</svg>
<!-- wrapper for icons placed within bodies of text -->
<span class="icon_inline">
<svg class="icon icon_fill" role="img" aria-label="icon description">
<use href="/images/core-icons.svg#icon-name" />
</svg>
</span>
Core Icons
Open Iconic
Tiny icons from the open source collection from Iconic. Searchable directory of 223 marks found on this page . Best used at 8px, 16px, and 24px. Use the path <?php echo $ICONIC_PATH; ?>#iconic-name. This library uses the file open-iconic-sprites.svg.
This library doesn't seem to be maintained any longer.
Examples below just for illustrative purposes. Full collection in the link above.
<svg class="icon icon_fill"><use href="<?php echo $ICONIC_PATH; ?>#iconic-name"></use></svg>