Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @forter/icon with all npm packages installed. Try it out:

var icon = require("@forter/icon")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@forter/icon v4.5.6

Icon Component from Forter Components

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

PropertyAttributeTypeDefaultDescription
cacheMap<any, any>Reference to the icon cache. This globally shared reference stores icons for all instance.
cssggcssggbooleanfalseWhether to use the css.gg div-based icons as opposed to fetch svg files from memory
fallbackIconfallback-iconstring"FC_ICON_DEFAULT"The fallback icon key for the instance
hoverablehoverablebooleanfalseWhether the icon will change colour when hovered.
iconiconstring""The icon key. Used to lookup icon in the cache. Falls back to 'forter' whenever an icon is not found. example: returns
originalFilloriginal-fillbooleanfalseWhether to use the icon's original 'fill' SVG property. Needed for multicolor icons or for certain types of SVG.
sizesizenumber20Icon size, in pixels. Numerical values will be converted to strings e.g. 20 -> '40px', example: 80px.

CSS Custom Properties

PropertyDescription
--fc-icon-fillicon's svg fill. default: currentColor
--fc-icon-fill-hovericon's svg fill on hover. default: var(--cyan-5)
--fc-icon-sizeicon's size. default: 20px, example: 80px
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free