diff --git a/iconify-icon/icon/README.md b/iconify-icon/icon/README.md index ca5836a..8cc3205 100644 --- a/iconify-icon/icon/README.md +++ b/iconify-icon/icon/README.md @@ -20,13 +20,13 @@ Iconify Icon web component renders icons. Add this line to your page to load IconifyIcon (you can add it to `` section of the page or before ``): ```html - + ``` or ```html - + ``` or, if you are building a project with a bundler, you can include the script by installing `iconify-icon` as a dependency and importing it in your project: diff --git a/iconify-icon/icon/demo/usage.html b/iconify-icon/icon/demo/usage.html index f119422..9a112a7 100644 --- a/iconify-icon/icon/demo/usage.html +++ b/iconify-icon/icon/demo/usage.html @@ -1,4 +1,4 @@ - + @@ -337,13 +337,21 @@

Hidden icons, appear on scroll

+ + + (https://iconify.design)", - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "main": "./dist/iconify-icon.cjs", "types": "./dist/iconify-icon.d.ts", diff --git a/iconify-icon/icon/src/attributes/inline.ts b/iconify-icon/icon/src/attributes/inline.ts deleted file mode 100644 index 0d310cc..0000000 --- a/iconify-icon/icon/src/attributes/inline.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Check for inline - */ -export function getInline(node: Element): boolean { - return node.hasAttribute('inline'); -} diff --git a/iconify-icon/icon/src/attributes/types.ts b/iconify-icon/icon/src/attributes/types.ts index a58488f..62adbad 100644 --- a/iconify-icon/icon/src/attributes/types.ts +++ b/iconify-icon/icon/src/attributes/types.ts @@ -51,8 +51,8 @@ export interface IconifyIconProperties // Inline mode inline?: boolean; - // Use intersection observer - observe?: boolean; + // Do not use intersection observer + noobserver?: boolean; } /** diff --git a/iconify-icon/icon/src/component.ts b/iconify-icon/icon/src/component.ts index a17e0f4..bfaf963 100644 --- a/iconify-icon/icon/src/component.ts +++ b/iconify-icon/icon/src/component.ts @@ -9,7 +9,6 @@ import type { CurrentIconData, RenderedCurrentIconData, } from './attributes/icon/state'; -import { getInline } from './attributes/inline'; import { getRenderMode } from './attributes/mode'; import type { IconifyIconProperties } from './attributes/types'; import { exportFunctions, IconifyExportedFunctions } from './functions'; @@ -89,7 +88,7 @@ export function defineIconifyIcon( // Mode 'mode', 'inline', - 'observe', + 'noobserver', // Customisations 'width', 'height', @@ -132,7 +131,7 @@ export function defineIconifyIcon( })); // Add style - const inline = getInline(this); + const inline = this.hasAttribute('inline'); updateStyle(root, inline); // Create empty state @@ -195,7 +194,7 @@ export function defineIconifyIcon( switch (name) { case 'inline': { // Update immediately: not affected by other attributes - const newInline = getInline(this); + const newInline = this.hasAttribute('inline'); const state = this._state; if (newInline !== state.inline) { // Update style if inline mode changed @@ -205,8 +204,8 @@ export function defineIconifyIcon( break; } - case 'observer': { - const value = this.observer; + case 'noobserver': { + const value = this.hasAttribute('noobserver'); if (value) { this.startObserver(); } else { @@ -247,7 +246,7 @@ export function defineIconifyIcon( * Get/set inline */ get inline(): boolean { - return getInline(this); + return this.hasAttribute('inline'); } set inline(value: boolean) { @@ -457,7 +456,7 @@ export function defineIconifyIcon( * Start observer */ startObserver() { - if (!this._observer) { + if (!this._observer && !this.hasAttribute('noobserver')) { try { this._observer = new IntersectionObserver((entries) => { const intersecting = entries.some( diff --git a/iconify-icon/react/package.json b/iconify-icon/react/package.json index bc7eadb..4b2ccdd 100644 --- a/iconify-icon/react/package.json +++ b/iconify-icon/react/package.json @@ -2,7 +2,7 @@ "name": "@iconify-icon/react", "description": "React wrapper for Iconify Icon web component", "author": "Vjacheslav Trushkin", - "version": "2.0.1", + "version": "2.1.0", "license": "MIT", "bugs": "https://github.com/iconify/iconify/issues", "homepage": "https://iconify.design/", diff --git a/iconify-icon/solid/package.json b/iconify-icon/solid/package.json index bbd7bc7..51db304 100644 --- a/iconify-icon/solid/package.json +++ b/iconify-icon/solid/package.json @@ -3,7 +3,7 @@ "type": "module", "description": "SolidJS wrapper for Iconify Icon web component", "author": "Vjacheslav Trushkin", - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "bugs": "https://github.com/iconify/iconify/issues", "homepage": "https://iconify.design/",