@vaadin/icon - npm Package Compare versions

		{
		"name": "@vaadin/icon",
		"version": "24.4.0-alpha22",
		"version": "24.4.0-alpha23",
		"publishConfig": {
		@@ -27,2 +27,4 @@ "access": "public"
		"vaadin-*.js",
		"!vaadin-lit-*.d.ts",
		"!vaadin-lit-*.js",
		"web-types.json",
		@@ -40,5 +42,5 @@ "web-types.lit.json"
		"@polymer/polymer": "^3.0.0",
		"@vaadin/component-base": "24.4.0-alpha22",
		"@vaadin/vaadin-lumo-styles": "24.4.0-alpha22",
		"@vaadin/vaadin-themable-mixin": "24.4.0-alpha22",
		"@vaadin/component-base": "24.4.0-alpha23",
		"@vaadin/vaadin-lumo-styles": "24.4.0-alpha23",
		"@vaadin/vaadin-themable-mixin": "24.4.0-alpha23",
		"lit": "^3.0.0"
		@@ -55,3 +57,3 @@ },
		],
		"gitHead": "8e5223bcb61a5561fd984db5d11b31a73ec98eaa"
		"gitHead": "a2d703efa3acbb60e1dfece97c506674e0bec19d"
		}

src/vaadin-icon.d.ts

		@@ -8,6 +8,4 @@ /**
		import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
		import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
		import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
		import type { IconSvgLiteral } from './vaadin-icon-svg.js';
		import { IconMixin } from './vaadin-icon-mixin.js';

		@@ -53,74 +51,4 @@ /**
		*/
		declare class Icon extends ThemableMixin(
		ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(HTMLElement)))),
		) {
		/**
		* The name of the icon to use. The name should be of the form:
		* `iconset_name:icon_name`. When using `vaadin-icons` it is possible
		* to omit the first part and only use `icon_name` as a value.
		*
		* Setting the `icon` property updates the `svg` and `size` based on the
		* values provided by the corresponding `vaadin-iconset` element.
		*
		* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
		*
		* @attr {string} icon
		*/
		icon: string \| null;
		declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(IconMixin(HTMLElement)))) {}

		/**
		* The SVG icon wrapped in a Lit template literal.
		*/
		svg: IconSvgLiteral \| null;

		/**
		* The SVG source to be loaded as the icon. It can be:
		* - an URL to a file containing the icon
		* - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
		* inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
		* - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
		* function for the SVG content passed
		*/
		src: string \| null;

		/**
		* The symbol identifier that references an ID of an element contained in the SVG element assigned to the
		* `src` property
		*/
		symbol: string \| null;

		/**
		* Class names defining an icon font and/or a specific glyph inside an icon font.
		*
		* Example: "fa-solid fa-user"
		*
		* @attr {string} icon-class
		*/
		iconClass: string \| null;

		/**
		* A hexadecimal code point that specifies a glyph from an icon font.
		*
		* Example: "e001"
		*/
		char: string \| null;

		/**
		* A ligature name that specifies an icon from an icon font with support for ligatures.
		*
		* Example: "home".
		*/
		ligature: string \| null;

		/**
		* The font family to use for the font icon.
		*/
		fontFamily: string \| null;

		/**
		* The size of an icon, used to set the `viewBox` attribute.
		*/
		size: number;
		}

		declare global {
		@@ -127,0 +55,0 @@ interface HTMLElementTagNameMap {

403

src/vaadin-icon.js

		@@ -6,2 +6,3 @@ /**
		*/
		import './vaadin-iconset.js';
		import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
		@@ -11,10 +12,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
		import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
		import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
		import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
		import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
		import { ensureSvgLiteral, renderSvg, unsafeSvgLiteral } from './vaadin-icon-svg.js';
		import { Iconset } from './vaadin-iconset.js';
		import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
		import { IconMixin } from './vaadin-icon-mixin.js';
		import { iconStyles } from './vaadin-icon-styles.js';

		const srcCache = new Map();
		registerStyles('vaadin-icon', iconStyles, { moduleId: 'vaadin-icon-styles' });

		@@ -62,53 +60,10 @@ /**
		* @extends HTMLElement
		* @mixes IconMixin
		* @mixes ControllerMixin
		* @mixes ThemableMixin
		* @mixes ElementMixin
		* @mixes SlotStylesMixin
		* @mixes IconFontSizeMixin
		*/
		class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(PolymerElement))))) {
		class Icon extends IconMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
		static get template() {
		return html`
		<style>
		:host {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		vertical-align: middle;
		width: 24px;
		height: 24px;
		fill: currentColor;
		container-type: size;
		}

		:host::after,
		:host::before {
		line-height: 1;
		font-size: 100cqh;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		-moz-osx-font-smoothing: grayscale;
		}

		:host([hidden]) {
		display: none !important;
		}

		svg {
		display: block;
		width: 100%;
		height: 100%;
		/* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
		overflow: visible;
		}

		:host(:is([icon-class], [font-icon-content])) svg {
		display: none;
		}

		:host([font-icon-content])::before {
		content: attr(font-icon-content);
		}
		</style>
		<svg
		@@ -140,346 +95,2 @@ version="1.1"
		}

		static get properties() {
		return {
		/**
		* The name of the icon to use. The name should be of the form:
		* `iconset_name:icon_name`. When using `vaadin-icons` it is possible
		* to omit the first part and only use `icon_name` as a value.
		*
		* Setting the `icon` property updates the `svg` and `size` based on the
		* values provided by the corresponding `vaadin-iconset` element.
		*
		* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
		*
		* @attr {string} icon
		* @type {string}
		*/
		icon: {
		type: String,
		reflectToAttribute: true,
		observer: '__iconChanged',
		},

		/**
		* The SVG icon wrapped in a Lit template literal.
		*/
		svg: {
		type: Object,
		},

		/**
		* The SVG source to be loaded as the icon. It can be:
		* - an URL to a file containing the icon
		* - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
		* inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
		* - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
		* function for the SVG content passed
		*
		* @type {string}
		*/
		src: {
		type: String,
		},

		/**
		* The symbol identifier that references an ID of an element contained in the SVG element assigned to the
		* `src` property
		*
		* @type {string}
		*/
		symbol: {
		type: String,
		},

		/**
		* Class names defining an icon font and/or a specific glyph inside an icon font.
		*
		* Example: "fa-solid fa-user"
		*
		* @attr {string} icon-class
		* @type {string}
		*/
		iconClass: {
		type: String,
		reflectToAttribute: true,
		},

		/**
		* A hexadecimal code point that specifies a glyph from an icon font.
		*
		* Example: "e001"
		*
		* @type {string}
		*/
		char: {
		type: String,
		},

		/**
		* A ligature name that specifies an icon from an icon font with support for ligatures.
		*
		* Example: "home".
		*
		* @type {string}
		*/
		ligature: {
		type: String,
		},

		/**
		* The font family to use for the font icon.
		*
		* @type {string}
		*/
		fontFamily: {
		type: String,
		observer: '__fontFamilyChanged',
		},

		/**
		* The size of an icon, used to set the `viewBox` attribute.
		*/
		size: {
		type: Number,
		value: 24,
		},

		/** @private */
		__defaultPAR: {
		type: String,
		value: 'xMidYMid meet',
		},

		/** @private */
		__preserveAspectRatio: String,

		/** @private */
		__useRef: Object,

		/** @private */
		__svgElement: String,

		/** @private */
		__viewBox: String,

		/** @private */
		__fill: String,

		/** @private */
		__stroke: String,

		/** @private */
		__strokeWidth: String,

		/** @private */
		__strokeLinecap: String,

		/** @private */
		__strokeLinejoin: String,
		};
		}

		static get observers() {
		return ['__svgChanged(svg, __svgElement)', '__fontChanged(iconClass, char, ligature)', '__srcChanged(src, symbol)'];
		}

		static get observedAttributes() {
		return [...super.observedAttributes, 'class'];
		}

		constructor() {
		super();

		this.__fetch = fetch.bind(window);
		}

		/** @protected */
		get slotStyles() {
		const tag = this.localName;
		return [
		`
		${tag}[icon-class] {
		display: inline-flex;
		vertical-align: middle;
		font-size: inherit;
		}
		`,
		];
		}

		/** @private */
		get __iconClasses() {
		return this.iconClass ? this.iconClass.split(' ') : [];
		}

		/** @protected */
		ready() {
		super.ready();
		this.__svgElement = this.shadowRoot.querySelector('#svg-group');

		this._tooltipController = new TooltipController(this);
		this.addController(this._tooltipController);
		}

		/** @protected */
		connectedCallback() {
		super.connectedCallback();

		Iconset.attachedIcons.add(this);
		}

		/** @protected */
		disconnectedCallback() {
		super.disconnectedCallback();

		Iconset.attachedIcons.delete(this);
		}

		/** @protected */
		_applyIcon() {
		const { preserveAspectRatio, svg, size, viewBox } = Iconset.getIconSvg(this.icon);

		if (viewBox) {
		this.__viewBox = viewBox;
		}

		if (preserveAspectRatio) {
		this.__preserveAspectRatio = preserveAspectRatio;
		}

		if (size && size !== this.size) {
		this.size = size;
		}

		this.svg = svg;
		}

		/** @private */
		__iconChanged(icon) {
		if (icon) {
		this._applyIcon();
		} else {
		this.svg = ensureSvgLiteral(null);
		}
		}

		/** @private */
		async __srcChanged(src, symbol) {
		if (!src) {
		this.svg = null;
		return;
		}

		// Need to add the "icon" attribute to avoid issues as described in
		// https://github.com/vaadin/web-components/issues/6301
		this.icon = '';

		if (!src.startsWith('data:') && (symbol \|\| src.includes('#'))) {
		const [path, iconId] = src.split('#');
		this.__useRef = `${path}#${symbol \|\| iconId}`;
		} else {
		try {
		if (!srcCache.has(src)) {
		srcCache.set(
		src,
		this.__fetch(src, { mode: 'cors' }).then((data) => {
		if (!data.ok) {
		throw new Error('Error loading icon');
		}
		return data.text();
		}),
		);
		}
		const svgData = await srcCache.get(src);

		if (!Icon.__domParser) {
		Icon.__domParser = new DOMParser();
		}
		const parsedResponse = Icon.__domParser.parseFromString(svgData, 'text/html');

		const svgElement = parsedResponse.querySelector('svg');
		if (!svgElement) {
		throw new Error(`SVG element not found on path: ${src}`);
		}

		this.svg = unsafeSvgLiteral(svgElement.innerHTML);

		if (symbol) {
		this.__useRef = `#${symbol}`;
		}

		this.__viewBox = svgElement.getAttribute('viewBox');
		this.__fill = svgElement.getAttribute('fill');
		this.__stroke = svgElement.getAttribute('stroke');
		this.__strokeWidth = svgElement.getAttribute('stroke-width');
		this.__strokeLinecap = svgElement.getAttribute('stroke-linecap');
		this.__strokeLinejoin = svgElement.getAttribute('stroke-linejoin');
		} catch (e) {
		console.error(e);
		this.svg = null;
		}
		}
		}

		/** @private */
		__svgChanged(svg, svgElement) {
		if (!svgElement) {
		return;
		}

		renderSvg(svg, svgElement);
		}

		/** @private */
		__computePAR(defaultPAR, preserveAspectRatio) {
		return preserveAspectRatio \|\| defaultPAR;
		}

		/** @private */
		__computeVisibility(__useRef) {
		return __useRef ? 'visible' : 'hidden';
		}

		/** @private */
		__computeViewBox(size, viewBox) {
		return viewBox \|\| `0 0 ${size} ${size}`;
		}

		/** @private */
		__fontChanged(iconClass, char, ligature) {
		this.classList.remove(...(this.__addedIconClasses \|\| []));
		if (iconClass) {
		this.__addedIconClasses = [...this.__iconClasses];
		this.classList.add(...this.__addedIconClasses);
		}

		if (char) {
		this.setAttribute('font-icon-content', char.length > 1 ? String.fromCodePoint(parseInt(char, 16)) : char);
		} else if (ligature) {
		this.setAttribute('font-icon-content', ligature);
		} else {
		this.removeAttribute('font-icon-content');
		}

		if ((iconClass \|\| char \|\| ligature) && !this.icon) {
		// The "icon" attribute needs to be set on the host also when using font icons
		// to avoid issues such as https://github.com/vaadin/web-components/issues/6301
		this.icon = '';
		}
		}

		/** @protected */
		attributeChangedCallback(name, oldValue, newValue) {
		super.attributeChangedCallback(name, oldValue, newValue);

		// Make sure class list always contains all the font class names
		if (name === 'class' && this.__iconClasses.some((className) => !this.classList.contains(className))) {
		this.classList.add(...this.__iconClasses);
		}
		}

		/** @private */
		__fontFamilyChanged(fontFamily) {
		this.style.fontFamily = `'${fontFamily}'`;
		}
		}
		@@ -486,0 +97,0 @@

src/vaadin-iconset.d.ts

		@@ -9,2 +9,3 @@ /**
		import type { IconSvgLiteral } from './vaadin-icon-svg.js';
		import { IconsetMixin } from './vaadin-iconset-mixin.js';

		@@ -14,3 +15,3 @@ /**
		*/
		declare class Iconset extends ElementMixin(HTMLElement) {
		declare class Iconset extends ElementMixin(IconsetMixin(HTMLElement)) {
		/**
		@@ -44,18 +45,2 @@ * Set of the `vaadin-icon` instances in the DOM.
		};

		/**
		* The name of the iconset. Every iconset is required to have its own unique name.
		* All the SVG icons in the iconset must have IDs conforming to its name.
		*
		* See also [`name`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.
		*/
		name: string;

		/**
		* The size of an individual icon. Note that icons must be square.
		*
		* When using `vaadin-icon`, the size of the iconset will take precedence
		* over the size defined by the user to ensure correct appearance.
		*/
		size: number;
		}
		@@ -62,0 +47,0 @@

166

src/vaadin-iconset.js

		@@ -9,31 +9,4 @@ /**
		import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
		import { cloneSvgNode } from './vaadin-icon-svg.js';
		import { IconsetMixin } from './vaadin-iconset-mixin.js';

		const iconsetRegistry = {};

		const attachedIcons = new Set();

		function getIconId(id, name) {
		return (id \|\| '').replace(`${name}:`, '');
		}

		function getIconsetName(icon) {
		if (!icon) {
		return;
		}

		const parts = icon.split(':');

		// Use "vaadin" as a fallback
		return parts[0] \|\| 'vaadin';
		}

		function initIconsMap(iconset, name) {
		iconset._icons = [...iconset.querySelectorAll('[id]')].reduce((map, svg) => {
		const key = getIconId(svg.id, name);
		map[key] = svg;
		return map;
		}, {});
		}

		/**
		@@ -44,5 +17,6 @@ * `<vaadin-iconset>` is a Web Component for creating SVG icon collections.
		* @extends HTMLElement
		* @mixes IconsetMixin
		* @mixes ElementMixin
		*/
		class Iconset extends ElementMixin(PolymerElement) {
		class Iconset extends IconsetMixin(ElementMixin(PolymerElement)) {
		static get template() {
		@@ -55,136 +29,2 @@ return null;
		}

		static get properties() {
		return {
		/**
		* The name of the iconset. Every iconset is required to have its own unique name.
		* All the SVG icons in the iconset must have IDs conforming to its name.
		*
		* See also [`name`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.
		*/
		name: {
		type: String,
		observer: '__nameChanged',
		},

		/**
		* The size of an individual icon. Note that icons must be square.
		*
		* When using `vaadin-icon`, the size of the iconset will take precedence
		* over the size defined by the user to ensure correct appearance.
		*/
		size: {
		type: Number,
		value: 24,
		},
		};
		}

		/**
		* Set of the `vaadin-icon` instances in the DOM.
		*
		* @return {Set<Icon>}
		*/
		static get attachedIcons() {
		return attachedIcons;
		}

		/**
		* Returns an instance of the iconset by its name.
		*
		* @param {string} name
		* @return {Iconset}
		*/
		static getIconset(name) {
		return iconsetRegistry[name];
		}

		/**
		* Returns SVGTemplateResult for the `icon` ID matching `name` of the
		* iconset, or `nothing` literal if there is no matching icon found.
		*
		* @param {string} icon
		* @param {?string} name
		*/
		static getIconSvg(icon, name) {
		const iconsetName = name \|\| getIconsetName(icon);
		const iconset = this.getIconset(iconsetName);

		if (!icon \|\| !iconset) {
		// Missing icon, return `nothing` literal.
		return { svg: cloneSvgNode(null) };
		}

		const iconId = getIconId(icon, iconsetName);
		const iconSvg = iconset._icons[iconId];

		return {
		preserveAspectRatio: iconSvg ? iconSvg.getAttribute('preserveAspectRatio') : null,
		svg: cloneSvgNode(iconSvg),
		size: iconset.size,
		viewBox: iconSvg ? iconSvg.getAttribute('viewBox') : null,
		};
		}

		/**
		* Register an iconset without adding to the DOM.
		*
		* @param {string} name
		* @param {number} size
		* @param {?HTMLTemplateElement} template
		*/
		static register(name, size, template) {
		if (!iconsetRegistry[name]) {
		const iconset = document.createElement('vaadin-iconset');
		iconset.appendChild(template.content.cloneNode(true));
		iconsetRegistry[name] = iconset;

		initIconsMap(iconset, name);

		iconset.size = size;
		iconset.name = name;

		// Call this function manually instead of using observer
		// to make it work without appending element to the DOM.
		iconset.__nameChanged(name);
		}
		}

		/** @protected */
		connectedCallback() {
		super.connectedCallback();

		this.style.display = 'none';

		// Store reference and init icons.
		const { name } = this;
		iconsetRegistry[name] = this;
		initIconsMap(this, name);
		this.__updateIcons(name);
		}

		/**
		* Update all the icons instances in the DOM.
		*
		* @param {string} name
		* @private
		*/
		__updateIcons(name) {
		attachedIcons.forEach((element) => {
		if (name === getIconsetName(element.icon)) {
		element._applyIcon();
		}
		});
		}

		/** @private */
		__nameChanged(name, oldName) {
		if (oldName) {
		iconsetRegistry[name] = iconsetRegistry[oldName];
		delete iconsetRegistry[oldName];
		}
		if (name) {
		this.__updateIcons(name);
		}
		}
		}
		@@ -191,0 +31,0 @@

web-types.json

		{
		"$schema": "https://json.schemastore.org/web-types",
		"name": "@vaadin/icon",
		"version": "24.4.0-alpha22",
		"version": "24.4.0-alpha23",
		"description-markup": "markdown",
		@@ -15,3 +15,3 @@ "contributions": {
		"name": "name",
		"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
		"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
		"value": {
		@@ -52,3 +52,3 @@ "type": [
		"name": "name",
		"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
		"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
		"value": {
		@@ -79,10 +79,10 @@ "type": [
		"name": "vaadin-icon",
		"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```",
		"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```",
		"attributes": [
		{
		"name": "class",
		"description": "",
		"name": "icon",
		"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
		"value": {
		"type": [
		""
		"string"
		]
		@@ -92,2 +92,67 @@ }
		{
		"name": "src",
		"description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format \"/path/to/file.svg#objectID\", where the \"objectID\" refers to an ID attribute contained\n inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format \"data:image/svg+xml,<svg>...</svg>\". You may need to use the \"encodeURIComponent\"\n function for the SVG content passed",
		"value": {
		"type": [
		"string"
		]
		}
		},
		{
		"name": "symbol",
		"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
		"value": {
		"type": [
		"string"
		]
		}
		},
		{
		"name": "icon-class",
		"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
		"value": {
		"type": [
		"string"
		]
		}
		},
		{
		"name": "char",
		"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
		"value": {
		"type": [
		"string"
		]
		}
		},
		{
		"name": "ligature",
		"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
		"value": {
		"type": [
		"string"
		]
		}
		},
		{
		"name": "font-family",
		"description": "The font family to use for the font icon.",
		"value": {
		"type": [
		"string"
		]
		}
		},
		{
		"name": "size",
		"description": "The size of an icon, used to set the `viewBox` attribute.",
		"value": {
		"type": [
		"number",
		"null",
		"undefined"
		]
		}
		},
		{
		"name": "theme",
		@@ -108,3 +173,3 @@ "description": "The theme variants to apply to the component.",
		"name": "icon",
		"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
		"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
		"value": {
		@@ -111,0 +176,0 @@ "type": [

web-types.lit.json

		{
		"$schema": "https://json.schemastore.org/web-types",
		"name": "@vaadin/icon",
		"version": "24.4.0-alpha22",
		"version": "24.4.0-alpha23",
		"description-markup": "markdown",
		@@ -24,3 +24,3 @@ "framework": "lit",
		"name": ".name",
		"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
		"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
		"value": {
		@@ -41,3 +41,3 @@ "kind": "expression"
		"name": "vaadin-icon",
		"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```",
		"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```",
		"extension": true,
		@@ -47,3 +47,3 @@ "attributes": [
		"name": ".icon",
		"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha22/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
		"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha23/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
		"value": {
		@@ -50,0 +50,0 @@ "kind": "expression"

Improved metrics

Dependency changes