@forter/icon - npm Package Compare versions

Comparing version 4.2.5 to 4.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [4.3.0](https://github.com/forter/web-components/compare/@forter/icon@4.2.5...@forter/icon@4.3.0) (2020-02-05)
+
+
+### Features
+
+* **icon:** non svg icons ([#243](https://github.com/forter/web-components/issues/243)) ([fa53471](https://github.com/forter/web-components/commit/fa53471))
+
+
+
+
+
 ## [4.2.5](https://github.com/forter/web-components/compare/@forter/icon@4.2.4...@forter/icon@4.2.5) (2020-02-04)
@@ -8,0 +19,0 @@

fc-icon.css.js

@@ -8,2 +8,5 @@ import { css } from 'lit-element';
   margin: 0 auto;
+  transition: var(--fc-icon-transition, 0.3s);
+  display: grid;
+  place-items: center;
 }
@@ -50,2 +53,15 @@
 }
+
+i {
+  --aic: var(--fc-icon-fill, currentColor);
+
+  color: var(--fc-icon-fill, currentColor);
+}
+
+i:hover {
+  --scpc: var(--fc-icon-fill-hover) !important;
+
+  color: var(--fc-icon-fill-hover) !important;
+  cursor: pointer;
+}
 `;
@@ -52,0 +68,0 @@

FcIcon.js

@@ -89,2 +89,7 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
  *
+ * <!-- 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>
+ *
  * ```
@@ -174,2 +179,14 @@ *
       decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "cssgg",
+
+      value() {
+        return false;
+      }
+
+    }, {
+      kind: "field",
+      decorators: [property({
         type: Number
@@ -235,2 +252,8 @@ })],
       /**
+       * Whether to use the css.gg div-based icons as opposed to fetch svg files from memory
+       * @type {Boolean}
+       * @attr is-css-gg
+       */
+
+      /**
        * Icon size, in pixels. Numerical values will be converted to strings e.g. 20 -> '40px', example: `80px`.
@@ -250,3 +273,4 @@ * @type {Number}
           icon,
-          size
+          size,
+          cssgg
         } = this;
@@ -258,2 +282,11 @@
 
+        if (cssgg) {
+          return html`
+        <link href='https://css.gg/c' rel='stylesheet'>
+        <div id="content">
+          <i style="--ggs: ${size / DEFAULT_SIZE};" class="gg-${icon}"></i>
+        </div>
+      `;
+        }
+
         return html`
@@ -260,0 +293,0 @@ <div id="content">

package.json

 {
   "name": "@forter/icon",
-  "version": "4.2.5",
+  "version": "4.3.0",
   "description": "Icon Component from Forter Components",
@@ -52,3 +52,3 @@ "main": "index.js",
   },
-  "gitHead": "1c5f63945ee511b09f8822c5a1bf678dad6fe6bb"
+  "gitHead": "96f59ebb93b588532a722e6c1906907de45b0175"
 }

README.md

@@ -77,2 +77,7 @@ # 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>
+
 ```
@@ -85,2 +90,3 @@
 | `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           |
@@ -87,0 +93,0 @@ | `hoverable`    | `hoverable`     | `boolean`       | false                 | Whether the icon will change colour when hovered. |

src/fc-icon.spec.js

@@ -13,3 +13,13 @@ import constant from 'crocks/combinators/constant';
 
-describe(FcIcon.is, assertWebComponentRender(FcIcon.is, properties));
+describe(
+  FcIcon.is,
+  assertWebComponentRender(FcIcon.is, properties, {
+    chaiDomDiffOpts: {
+      ignoreTags: ['link', 'i'],
+      // TODO: in some computers its not show up on tests
+      // TODO: throw exception on same name tests (attr vs slot)
+      // TODO: when tests not run fail push
+    },
+  }),
+);
 
@@ -25,3 +35,2 @@ import { aTimeout, expect } from '@open-wc/testing';
 
-
 import { registerIconCache } from './cache';
@@ -48,3 +57,7 @@
     .then(getDefaultExport)
-    .catch(constant(`Could Not Find Expected ShadowDOM for "${this.test.parent.title}"`));
+    .catch(
+      constant(
+        `Could Not Find Expected ShadowDOM for "${this.test.parent.title}"`,
+      ),
+    );
   return assertRenderWithHTML(html);
@@ -114,3 +127,1 @@ }
 });
-
-

src/FcIcon.js

@@ -88,2 +88,7 @@ import { LitElement, html, property } from 'lit-element';
  *
+ * <!-- 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>
+ *
  * ```
@@ -134,2 +139,9 @@ *
   /**
+   * Whether to use the css.gg div-based icons as opposed to fetch svg files from memory
+   * @type {Boolean}
+   * @attr is-css-gg
+   */
+  @property({ type: Boolean, reflect: true }) cssgg = false;
+
+  /**
    * Icon size, in pixels. Numerical values will be converted to strings e.g. 20 -> '40px', example: `80px`.
@@ -153,3 +165,3 @@ * @type {Number}
   render() {
-    const { icon, size } = this;
+    const { icon, size, cssgg } = this;
 
@@ -160,2 +172,11 @@ if (!size || size !== DEFAULT_SIZE) {
 
+    if (cssgg) {
+      return html`
+        <link href='https://css.gg/c' rel='stylesheet'>
+        <div id="content">
+          <i style="--ggs: ${size / DEFAULT_SIZE};" class="gg-${icon}"></i>
+        </div>
+      `;
+    }
+
     return html`
@@ -162,0 +183,0 @@ <div id="content">

stories/icon.stories.js

@@ -5,13 +5,14 @@ import {html} from 'lit-html';
 import '../src';
-import {FcIcon} from '../src/FcIcon';
+import { FcIcon } from '../src/FcIcon';
 import markdown from '../README.md';
 
-import {markdownToStories} from '../../../lib/storybook-helpers';
+import { markdownToStories } from '../../../lib/storybook-helpers';
 
 export default {
   title: 'Display Components|Icon',
+  component: 'fc-icon',
+  excludeStories: ['noProperties'],
   stories: markdownToStories(FcIcon, markdown),
-  component: 'fc-icon',
   decorators: [withKnobs, withWebComponentsKnobs],
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } },
 };

web-components.json

@@ -6,4 +6,4 @@ {
       "name": "fc-icon",
-      "description": "Icon element with global icon cache.\n<!-- Author: Ori Weingart <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/icon';\n</script>\n\n<fc-icon icon=\"ecommerce\"></fc-icon>\n```\n\n### Example\nCreate blue icon and red on hover.\n\n```css\n.custom-icon {\n    --fc-icon-fill: blue;\n    --fc-icon-fill-hover: red;\n}\n```\n## Examples\n```html\n<!-- icons -->\n<fc-icon icon=\"ecommerce\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"loyalty\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"returns\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"inr\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"promotions\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"gateway\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"developer\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n\n<!-- smallerIcons -->\n<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>\n<fc-tooltip tooltip=\"add-user\"><fc-icon icon=\"add-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"add\"><fc-icon icon=\"add\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"admin\"><fc-icon icon=\"admin\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"arrow-down\"><fc-icon icon=\"arrow-down\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"back\"><fc-icon icon=\"back\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"chat\"><fc-icon icon=\"chat\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"code-close\"><fc-icon icon=\"code-close\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"code-open\"><fc-icon icon=\"code-open\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"copy\"><fc-icon icon=\"copy\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"delete\"><fc-icon icon=\"delete\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"doc\"><fc-icon icon=\"doc\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"done\"><fc-icon icon=\"done\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"edit\"><fc-icon icon=\"edit\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"f2f\"><fc-icon icon=\"f2f\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"forter\"><fc-icon icon=\"forter\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"group\"><fc-icon icon=\"group\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"microphone\"><fc-icon icon=\"microphone\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"na\"><fc-icon icon=\"na\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"new-tab\"><fc-icon icon=\"new-tab\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"next\"><fc-icon icon=\"next\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"pre\"><fc-icon icon=\"pre\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"qa\"><fc-icon icon=\"qq\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"remove-user\"><fc-icon icon=\"remove-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"review\"><fc-icon icon=\"review\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"right\"><fc-icon icon=\"right\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"search\"><fc-icon icon=\"search\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"skip\"><fc-icon icon=\"skip\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"star\"><fc-icon icon=\"star\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"star-false\"><fc-icon icon=\"star-false\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"star-true\"><fc-icon icon=\"star-true\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"study\"><fc-icon icon=\"study\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"user\"><fc-icon icon=\"user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"vid\"><fc-icon icon=\"vid\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<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>\n<style> fc-tooltip { padding: 10px 5px; } </style>\n\n<!-- sizeOnly -->\n<fc-icon size=\"60\" icon=\"ecommerce\"></fc-icon>\n\n```",
-      "jsDoc": "/**\n * Icon element with global icon cache.\n * <!-- Author: Ori Weingart <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/icon';\n * </script>\n *\n * <fc-icon icon=\"ecommerce\"></fc-icon>\n * ```\n *\n * ### Example\n * Create blue icon and red on hover.\n *\n * ```css\n * .custom-icon {\n *    --fc-icon-fill: blue;\n *    --fc-icon-fill-hover: red;\n * }\n * ```\n * ## Examples\n * ```html\n * <!-- icons -->\n * <fc-icon icon=\"ecommerce\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"loyalty\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"returns\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"inr\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"promotions\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"gateway\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"developer\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n *\n * <!-- smallerIcons -->\n * <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>\n * <fc-tooltip tooltip=\"add-user\"><fc-icon icon=\"add-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"add\"><fc-icon icon=\"add\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"admin\"><fc-icon icon=\"admin\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"arrow-down\"><fc-icon icon=\"arrow-down\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"back\"><fc-icon icon=\"back\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"chat\"><fc-icon icon=\"chat\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"code-close\"><fc-icon icon=\"code-close\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"code-open\"><fc-icon icon=\"code-open\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"copy\"><fc-icon icon=\"copy\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"delete\"><fc-icon icon=\"delete\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"doc\"><fc-icon icon=\"doc\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"done\"><fc-icon icon=\"done\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"edit\"><fc-icon icon=\"edit\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"f2f\"><fc-icon icon=\"f2f\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"forter\"><fc-icon icon=\"forter\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"group\"><fc-icon icon=\"group\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"microphone\"><fc-icon icon=\"microphone\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"na\"><fc-icon icon=\"na\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"new-tab\"><fc-icon icon=\"new-tab\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"next\"><fc-icon icon=\"next\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"pre\"><fc-icon icon=\"pre\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"qa\"><fc-icon icon=\"qq\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"remove-user\"><fc-icon icon=\"remove-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"review\"><fc-icon icon=\"review\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"right\"><fc-icon icon=\"right\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"search\"><fc-icon icon=\"search\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"skip\"><fc-icon icon=\"skip\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"star\"><fc-icon icon=\"star\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"star-false\"><fc-icon icon=\"star-false\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"star-true\"><fc-icon icon=\"star-true\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"study\"><fc-icon icon=\"study\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"user\"><fc-icon icon=\"user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"vid\"><fc-icon icon=\"vid\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <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>\n * <style> fc-tooltip { padding: 10px 5px; } </style>\n *\n * <!-- sizeOnly -->\n * <fc-icon size=\"60\" icon=\"ecommerce\"></fc-icon>\n *\n * ```\n *\n * @element fc-icon\n *\n * @cssprop --fc-icon-size - icon's size. default: `20px`, example: `80px`\n * @cssprop --fc-icon-fill - icon's svg fill. default: `currentColor`\n * @cssprop --fc-icon-fill-hover - icon's svg fill on hover. default: `var(--cyan-5)`\n *\n */",
+      "description": "Icon element with global icon cache.\n<!-- Author: Ori Weingart <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/icon';\n</script>\n\n<fc-icon icon=\"ecommerce\"></fc-icon>\n```\n\n### Example\nCreate blue icon and red on hover.\n\n```css\n.custom-icon {\n    --fc-icon-fill: blue;\n    --fc-icon-fill-hover: red;\n}\n```\n## Examples\n```html\n<!-- icons -->\n<fc-icon icon=\"ecommerce\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"loyalty\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"returns\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"inr\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"promotions\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"gateway\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n<fc-icon icon=\"developer\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n\n<!-- smallerIcons -->\n<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>\n<fc-tooltip tooltip=\"add-user\"><fc-icon icon=\"add-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"add\"><fc-icon icon=\"add\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"admin\"><fc-icon icon=\"admin\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"arrow-down\"><fc-icon icon=\"arrow-down\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"back\"><fc-icon icon=\"back\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"chat\"><fc-icon icon=\"chat\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"code-close\"><fc-icon icon=\"code-close\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"code-open\"><fc-icon icon=\"code-open\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"copy\"><fc-icon icon=\"copy\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"delete\"><fc-icon icon=\"delete\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"doc\"><fc-icon icon=\"doc\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"done\"><fc-icon icon=\"done\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"edit\"><fc-icon icon=\"edit\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"f2f\"><fc-icon icon=\"f2f\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"forter\"><fc-icon icon=\"forter\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"group\"><fc-icon icon=\"group\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"microphone\"><fc-icon icon=\"microphone\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"na\"><fc-icon icon=\"na\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"new-tab\"><fc-icon icon=\"new-tab\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"next\"><fc-icon icon=\"next\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"pre\"><fc-icon icon=\"pre\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"qa\"><fc-icon icon=\"qq\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"remove-user\"><fc-icon icon=\"remove-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"review\"><fc-icon icon=\"review\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"right\"><fc-icon icon=\"right\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"search\"><fc-icon icon=\"search\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"skip\"><fc-icon icon=\"skip\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"star\"><fc-icon icon=\"star\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"star-false\"><fc-icon icon=\"star-false\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"star-true\"><fc-icon icon=\"star-true\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"study\"><fc-icon icon=\"study\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"user\"><fc-icon icon=\"user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<fc-tooltip tooltip=\"vid\"><fc-icon icon=\"vid\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n<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>\n<style> fc-tooltip { padding: 10px 5px; } </style>\n\n<!-- sizeOnly -->\n<fc-icon size=\"60\" icon=\"ecommerce\"></fc-icon>\n\n<!-- iconsGg -->\n<fc-icon icon=\"battery-empty\" cssgg></fc-icon>\n<fc-icon style=\"--fc-icon-fill: orange;\" icon=\"battery\" cssgg></fc-icon>\n<fc-icon style=\"--fc-icon-fill: green;\" size=\"40\" icon=\"battery-full\" cssgg></fc-icon>\n\n```",
+      "jsDoc": "/**\n * Icon element with global icon cache.\n * <!-- Author: Ori Weingart <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/icon';\n * </script>\n *\n * <fc-icon icon=\"ecommerce\"></fc-icon>\n * ```\n *\n * ### Example\n * Create blue icon and red on hover.\n *\n * ```css\n * .custom-icon {\n *    --fc-icon-fill: blue;\n *    --fc-icon-fill-hover: red;\n * }\n * ```\n * ## Examples\n * ```html\n * <!-- icons -->\n * <fc-icon icon=\"ecommerce\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"loyalty\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"returns\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"inr\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"promotions\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"gateway\"  size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n * <fc-icon icon=\"developer\" size=\"40\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon>\n *\n * <!-- smallerIcons -->\n * <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>\n * <fc-tooltip tooltip=\"add-user\"><fc-icon icon=\"add-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"add\"><fc-icon icon=\"add\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"admin\"><fc-icon icon=\"admin\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"arrow-down\"><fc-icon icon=\"arrow-down\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"back\"><fc-icon icon=\"back\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"chat\"><fc-icon icon=\"chat\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"code-close\"><fc-icon icon=\"code-close\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"code-open\"><fc-icon icon=\"code-open\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"copy\"><fc-icon icon=\"copy\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"delete\"><fc-icon icon=\"delete\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"doc\"><fc-icon icon=\"doc\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"done\"><fc-icon icon=\"done\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"edit\"><fc-icon icon=\"edit\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"f2f\"><fc-icon icon=\"f2f\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"forter\"><fc-icon icon=\"forter\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"group\"><fc-icon icon=\"group\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"microphone\"><fc-icon icon=\"microphone\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"na\"><fc-icon icon=\"na\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"new-tab\"><fc-icon icon=\"new-tab\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"next\"><fc-icon icon=\"next\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"pre\"><fc-icon icon=\"pre\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"qa\"><fc-icon icon=\"qq\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"remove-user\"><fc-icon icon=\"remove-user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"review\"><fc-icon icon=\"review\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"right\"><fc-icon icon=\"right\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"search\"><fc-icon icon=\"search\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"skip\"><fc-icon icon=\"skip\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"star\"><fc-icon icon=\"star\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"star-false\"><fc-icon icon=\"star-false\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"star-true\"><fc-icon icon=\"star-true\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"study\"><fc-icon icon=\"study\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"user\"><fc-icon icon=\"user\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <fc-tooltip tooltip=\"vid\"><fc-icon icon=\"vid\" size=\"20\" style=\"--fc-icon-fill-hover:gold;\" hoverable></fc-icon></fc-tooltip>\n * <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>\n * <style> fc-tooltip { padding: 10px 5px; } </style>\n *\n * <!-- sizeOnly -->\n * <fc-icon size=\"60\" icon=\"ecommerce\"></fc-icon>\n *\n * <!-- iconsGg -->\n * <fc-icon icon=\"battery-empty\" cssgg></fc-icon>\n * <fc-icon style=\"--fc-icon-fill: orange;\" icon=\"battery\" cssgg></fc-icon>\n * <fc-icon style=\"--fc-icon-fill: green;\" size=\"40\" icon=\"battery-full\" cssgg></fc-icon>\n *\n * ```\n *\n * @element fc-icon\n *\n * @cssprop --fc-icon-size - icon's size. default: `20px`, example: `80px`\n * @cssprop --fc-icon-fill - icon's svg fill. default: `currentColor`\n * @cssprop --fc-icon-fill-hover - icon's svg fill on hover. default: `var(--cyan-5)`\n *\n */",
       "attributes": [
@@ -35,2 +35,8 @@ {
         {
+          "name": "cssgg",
+          "description": "Whether to use the css.gg div-based icons as opposed to fetch svg files from memory",
+          "jsDoc": "/**\n   * Whether to use the css.gg div-based icons as opposed to fetch svg files from memory\n   * @type {Boolean}\n   * @attr is-css-gg\n   */",
+          "type": "boolean"
+        },
+        {
           "name": "size",
@@ -74,2 +80,8 @@ "description": "Icon size, in pixels. Numerical values will be converted to strings e.g. 20 -> '40px', example: `80px`.",
         {
+          "name": "cssgg",
+          "description": "Whether to use the css.gg div-based icons as opposed to fetch svg files from memory",
+          "jsDoc": "/**\n   * Whether to use the css.gg div-based icons as opposed to fetch svg files from memory\n   * @type {Boolean}\n   * @attr is-css-gg\n   */",
+          "type": "boolean"
+        },
+        {
           "name": "size",
@@ -76,0 +88,0 @@ "description": "Icon size, in pixels. Numerical values will be converted to strings e.g. 20 -> '40px', example: `80px`.",

No alert changes

Improved metrics

Total package byte prevSize

338202

increased by1.63%

Number of package files

202

increased by2.02%

Lines of code

2939

increased by3.52%

Number of lines in readme file

103

increased by6.19%

No dependency changes