Novelty Promotes Magicians

    @forter/icon

    4.10.2 • Public • Published

    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

    Install

    npm i @forter/icon

    DownloadsWeekly Downloads

    3,232

    Version

    4.10.2

    License

    Apache-2.0

    Unpacked Size

    490 kB

    Total Files

    292

    Last publish

    Collaborators

    • forter-npm
    • lirown
    • oweingart