@forter/icon

Icon Component from Forter Components

Usage no npm install needed!

<script type="module">
  import forterIcon from 'https://cdn.skypack.dev/@forter/icon';
</script>

README

fc-icon

Icon element with global icon cache.

Usage

<script>
   import '@forter/icon';
</script>

<fc-icon icon="ecommerce"></fc-icon>

Example

Create blue icon and red on hover.

.custom-icon {
    --fc-icon-fill: blue;
    --fc-icon-fill-hover: red;
}

Examples

<!-- icons -->
<fc-icon icon="ecommerce" size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>
<fc-icon icon="loyalty" size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>
<fc-icon icon="returns" size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>
<fc-icon icon="inr"  size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>
<fc-icon icon="promotions"  size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>
<fc-icon icon="gateway"  size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>
<fc-icon icon="developer" size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>

<!-- smallerIcons -->
<fc-tooltip tooltip="add-no-circle"><fc-icon icon="add-no-circle" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="add-user"><fc-icon icon="add-user" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="add"><fc-icon icon="add" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="admin"><fc-icon icon="admin" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="arrow-down"><fc-icon icon="arrow-down" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="back"><fc-icon icon="back" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="chat"><fc-icon icon="chat" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="code-close"><fc-icon icon="code-close" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="code-open"><fc-icon icon="code-open" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="copy"><fc-icon icon="copy" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="delete"><fc-icon icon="delete" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="doc"><fc-icon icon="doc" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="done"><fc-icon icon="done" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="edit"><fc-icon icon="edit" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="f2f"><fc-icon icon="f2f" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="forter"><fc-icon icon="forter" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="group"><fc-icon icon="group" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="microphone"><fc-icon icon="microphone" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="na"><fc-icon icon="na" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="new-tab"><fc-icon icon="new-tab" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="next"><fc-icon icon="next" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="pre"><fc-icon icon="pre" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="qa"><fc-icon icon="qq" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="remove-user"><fc-icon icon="remove-user" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="review"><fc-icon icon="review" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="right"><fc-icon icon="right" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="left"><fc-icon icon="left" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="search"><fc-icon icon="search" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="skip"><fc-icon icon="skip" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="star"><fc-icon icon="star" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="star-false"><fc-icon icon="star-false" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="star-true"><fc-icon icon="star-true" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="study"><fc-icon icon="study" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="user"><fc-icon icon="user" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="vid"><fc-icon icon="vid" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="view-in-single-page"><fc-icon icon="view-in-single-page" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="uninitialized"><fc-icon icon="uninitialized" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="notStarted"><fc-icon icon="notStarted" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<fc-tooltip tooltip="finished"><fc-icon icon="finished" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<style> fc-tooltip { padding: 10px 5px; } </style>

<!-- sizeOnly -->
<fc-icon size="60" icon="ecommerce"></fc-icon>

<!-- iconsGg -->
<fc-icon icon="battery-empty" cssgg></fc-icon>
<fc-icon style="--fc-icon-fill: orange;" icon="battery" cssgg></fc-icon>
<fc-icon style="--fc-icon-fill: green;" size="40" icon="battery-full" cssgg></fc-icon>

Properties

Property Attribute Type Default Description
cache Map<any, any> Reference to the icon cache. This globally shared reference stores icons for all instance.
cssgg cssgg boolean false Whether to use the css.gg div-based icons as opposed to fetch svg files from memory
fallbackIcon fallback-icon string "FC_ICON_DEFAULT" The fallback icon key for the instance
hoverable hoverable boolean false Whether the icon will change colour when hovered.
icon icon string "" The icon key. Used to lookup icon in the cache. Falls back to 'forter' whenever an icon is not found. example: returns
originalFill original-fill boolean false Whether to use the icon's original 'fill' SVG property. Needed for multicolor icons or for certain types of SVG.
size size number 20 Icon size, in pixels. Numerical values will be converted to strings e.g. 20 -> '40px', example: 80px.

CSS Custom Properties

Property Description
--fc-icon-fill icon's svg fill. default: currentColor
--fc-icon-fill-hover icon's svg fill on hover. default: var(--cyan-5)
--fc-icon-image-transition transition on the image itself.
--fc-icon-size icon's size. default: 20px, example: 80px