<i class="i i-facebook-brand"></i>
<i class="i i-{{ icon }}"></i>
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "icon": "facebook-brand"
}
  • Content:
    {
      "spriteName": "sprite-915cb569.svg",
      "icons": [
        "arrow-left",
        "arrow-right",
        "calendar",
        "check",
        "error",
        "facebook-brand",
        "feedback",
        "filter-library",
        "filter-primary",
        "filter-white",
        "info",
        "instagram-brand",
        "linkedin-brand",
        "mail",
        "print",
        "search",
        "search-black",
        "search-gray",
        "search-white",
        "twitter-brand",
        "warning",
        "youtube-brand"
      ]
    }
    
  • URL: /components/raw/icon/sprite-data.json
  • Filesystem Path: src-fractal/html/03-modules/icon/sprite-data.json
  • Size: 452 Bytes

Icons are displayed as background images using a SVG image file. Icons are automatically generated from a folder of single icons in the build process of this library.

If your project needs additional icons it is advisable to use a custom solution for your project to keep this library general.

By convention icons use the (semantic-less) <i> tag:

<i class="i i-<icon-name>"></i>

To create a icon hover effect use the following pattern:

  • Add .i-hover-target to the element that will trigger the hover
  • Add .i-hover to the <i class="i"></i> element (in addition to the default classes)
  • Add <icon-name>-hover to the <i class="i"></i> element (in addition to the default classes)
<a class="i-hover-target" href="..">
  <i class="i i-hover i-search-light i-search-dark-hover"></i>
</a>

All icons have the capability to be the “hover-state-icon” via the .i-<icon-name>-hover pattern, however it is recommended that you use two icons that match in shape and size.