Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/icon

Package Overview
Dependencies
Maintainers
12
Versions
396
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/icon - npm Package Compare versions

Comparing version 24.4.0-alpha9 to 24.4.0-beta1

src/vaadin-icon-mixin.d.ts
src/vaadin-icon-mixin.js
src/vaadin-icon-styles.js
src/vaadin-iconset-mixin.d.ts
src/vaadin-iconset-mixin.js

12

package.json
{
"name": "@vaadin/icon",
"version": "24.4.0-alpha9",
"version": "24.4.0-beta1",
"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-alpha9",
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha9",
"@vaadin/component-base": "24.4.0-beta1",
"@vaadin/vaadin-lumo-styles": "24.4.0-beta1",
"@vaadin/vaadin-themable-mixin": "24.4.0-beta1",
"lit": "^3.0.0"

@@ -55,3 +57,3 @@ },

],
"gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
"gitHead": "504787f741d677467ae93ca7cd31d84489366a9c"
}

1

README.md

@@ -8,3 +8,2 @@ # @vaadin/icon

[![npm version](https://badgen.net/npm/v/@vaadin/icon)](https://www.npmjs.com/package/@vaadin/icon)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

@@ -11,0 +10,0 @@ ```html

76

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 {

401

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,51 +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%;
}
:host(:is([icon-class], [font-icon-content])) svg {
display: none;
}
:host([font-icon-content])::before {
content: attr(font-icon-content);
}
</style>
<svg

@@ -138,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}'`;
}
}

@@ -484,0 +97,0 @@

19

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 @@

81

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/icon",
"version": "24.4.0-alpha9",
"version": "24.4.0-beta1",
"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-alpha9/#/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-beta1/#/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-alpha9/#/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-beta1/#/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-alpha9/#/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-alpha9/#/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-beta1/#/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-beta1/#/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-beta1/#/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-alpha9/#/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-beta1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"value": {

@@ -111,0 +176,0 @@ "type": [

8

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/icon",
"version": "24.4.0-alpha9",
"version": "24.4.0-beta1",
"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-alpha9/#/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-beta1/#/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-alpha9/#/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-alpha9/#/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-beta1/#/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-beta1/#/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-alpha9/#/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-beta1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"value": {

@@ -50,0 +50,0 @@ "kind": "expression"

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc