@forter/icon NPM

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>
<fc-icon icon="animated-atom" size="40" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon>

<!-- smallerIcons -->
<fc-tooltip tooltip="information"><fc-icon icon="information" size="20" style="--fc-icon-fill-hover:gold;" hoverable></fc-icon></fc-tooltip>
<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`