Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@vaadin/icon

Package Overview
Dependencies
Maintainers
12
Versions
555
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
25.1.0-alpha6
 to
25.1.0-alpha7
+980
custom-elements.json
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "vaadin-iconset.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/vaadin-iconset.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "vaadin-icon.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/vaadin-icon.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-icon-font-size-mixin.js",
"declarations": [
{
"kind": "function",
"name": "IconFontSizeMixin",
"parameters": [
{
"name": "superclass"
}
],
"description": "Mixin which enables the font icon sizing fallback for browsers that do not support CSS Container Queries.\nIn older versions of Safari, it didn't support Container Queries units used in pseudo-elements. It has been fixed in\nrecent versions, but there's an regression in Safari 26, which caused the same issue to happen when the icon is\nattached to an element with shadow root.\nThe mixin does nothing if the browser supports CSS Container Query units for pseudo elements."
}
],
"exports": [
{
"kind": "js",
"name": "IconFontSizeMixin",
"declaration": {
"name": "IconFontSizeMixin",
"module": "src/vaadin-icon-font-size-mixin.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-icon-helpers.js",
"declarations": [
{
"kind": "function",
"name": "supportsCQUnitsForPseudoElements",
"description": "Checks if the current browser supports CSS Container Query units for pseudo elements.\ni.e. if the fix for https://bugs.webkit.org/show_bug.cgi?id=253939 is available."
},
{
"kind": "function",
"name": "needsFontIconSizingFallback",
"description": "Checks if the current browser needs a fallback for sizing font icons instead of relying on CSS Container Queries."
}
],
"exports": [
{
"kind": "js",
"name": "supportsCQUnitsForPseudoElements",
"declaration": {
"name": "supportsCQUnitsForPseudoElements",
"module": "src/vaadin-icon-helpers.js"
}
},
{
"kind": "js",
"name": "needsFontIconSizingFallback",
"declaration": {
"name": "needsFontIconSizingFallback",
"module": "src/vaadin-icon-helpers.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-icon-mixin.js",
"declarations": [
{
"kind": "mixin",
"description": "",
"name": "IconMixin",
"members": [
{
"kind": "field",
"name": "char",
"privacy": "public",
"type": {
"text": "string"
},
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
"attribute": "char"
},
{
"kind": "field",
"name": "fontFamily",
"privacy": "public",
"type": {
"text": "string"
},
"description": "The font family to use for the font icon.",
"attribute": "font-family"
},
{
"kind": "field",
"name": "icon",
"privacy": "public",
"type": {
"text": "string"
},
"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`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"attribute": "icon"
},
{
"kind": "field",
"name": "iconClass",
"privacy": "public",
"type": {
"text": "string"
},
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
"attribute": "icon-class"
},
{
"kind": "field",
"name": "ligature",
"privacy": "public",
"type": {
"text": "string"
},
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
"attribute": "ligature"
},
{
"kind": "field",
"name": "size",
"privacy": "public",
"type": {
"text": "number"
},
"description": "The size of an icon, used to set the `viewBox` attribute.",
"attribute": "size"
},
{
"kind": "field",
"name": "src",
"privacy": "public",
"type": {
"text": "string"
},
"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",
"attribute": "src"
},
{
"kind": "field",
"name": "svg",
"privacy": "public",
"type": {
"text": "object"
},
"description": "The SVG icon wrapped in a Lit template literal.",
"attribute": "svg"
},
{
"kind": "field",
"name": "symbol",
"privacy": "public",
"type": {
"text": "string"
},
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
"attribute": "symbol"
}
],
"attributes": [
{
"name": "char",
"type": {
"text": "string"
},
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
"fieldName": "char"
},
{
"name": "class"
},
{
"name": "font-family",
"type": {
"text": "string"
},
"description": "The font family to use for the font icon.",
"fieldName": "fontFamily"
},
{
"name": "icon",
"type": {
"text": "string"
},
"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`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"fieldName": "icon"
},
{
"name": "icon-class",
"type": {
"text": "string"
},
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
"fieldName": "iconClass"
},
{
"name": "ligature",
"type": {
"text": "string"
},
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
"fieldName": "ligature"
},
{
"name": "size",
"type": {
"text": "number"
},
"description": "The size of an icon, used to set the `viewBox` attribute.",
"fieldName": "size"
},
{
"name": "src",
"type": {
"text": "string"
},
"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",
"fieldName": "src"
},
{
"name": "symbol",
"type": {
"text": "string"
},
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
"fieldName": "symbol"
}
],
"mixins": [
{
"name": "IconFontSizeMixin",
"module": "src/vaadin-icon-font-size-mixin.js"
}
],
"parameters": [
{
"name": "superClass"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "IconMixin",
"declaration": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-icon-svg.js",
"declarations": [
{
"kind": "function",
"name": "cloneSvgNode",
"parameters": [
{
"name": "source",
"type": {
"text": "Element"
}
}
],
"description": "Clone given node and return its content as SVG literal."
},
{
"kind": "function",
"name": "isValidSvg",
"parameters": [
{
"name": "source",
"type": {
"text": "unknown"
}
}
],
"description": "Test if the given argument is a valid SVG literal."
},
{
"kind": "function",
"name": "ensureSvgLiteral",
"parameters": [
{
"name": "source",
"type": {
"text": "unknown"
}
}
],
"description": "Create a valid SVG literal based on the argument."
},
{
"kind": "function",
"name": "unsafeSvgLiteral",
"parameters": [
{
"name": "source",
"type": {
"text": "string"
}
}
],
"description": "Create an SVG literal from source string."
}
],
"exports": [
{
"kind": "js",
"name": "cloneSvgNode",
"declaration": {
"name": "cloneSvgNode",
"module": "src/vaadin-icon-svg.js"
}
},
{
"kind": "js",
"name": "isValidSvg",
"declaration": {
"name": "isValidSvg",
"module": "src/vaadin-icon-svg.js"
}
},
{
"kind": "js",
"name": "ensureSvgLiteral",
"declaration": {
"name": "ensureSvgLiteral",
"module": "src/vaadin-icon-svg.js"
}
},
{
"kind": "js",
"name": "unsafeSvgLiteral",
"declaration": {
"name": "unsafeSvgLiteral",
"module": "src/vaadin-icon-svg.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-icon.js",
"declarations": [
{
"kind": "class",
"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`](#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"name": "Icon",
"members": [
{
"kind": "field",
"name": "char",
"privacy": "public",
"type": {
"text": "string"
},
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
"attribute": "char",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "fontFamily",
"privacy": "public",
"type": {
"text": "string"
},
"description": "The font family to use for the font icon.",
"attribute": "font-family",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "icon",
"privacy": "public",
"type": {
"text": "string"
},
"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`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"attribute": "icon",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "iconClass",
"privacy": "public",
"type": {
"text": "string"
},
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
"attribute": "icon-class",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "ligature",
"privacy": "public",
"type": {
"text": "string"
},
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
"attribute": "ligature",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "size",
"privacy": "public",
"type": {
"text": "number"
},
"description": "The size of an icon, used to set the `viewBox` attribute.",
"attribute": "size",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "src",
"privacy": "public",
"type": {
"text": "string"
},
"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",
"attribute": "src",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "svg",
"privacy": "public",
"type": {
"text": "object"
},
"description": "The SVG icon wrapped in a Lit template literal.",
"attribute": "svg",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"kind": "field",
"name": "symbol",
"privacy": "public",
"type": {
"text": "string"
},
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
"attribute": "symbol",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
}
],
"mixins": [
{
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
},
{
"name": "ElementMixin",
"package": "@vaadin/component-base/src/element-mixin.js"
},
{
"name": "ThemableMixin",
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
},
{
"name": "PolylitMixin",
"package": "@vaadin/component-base/src/polylit-mixin.js"
},
{
"name": "LumoInjectionMixin",
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "vaadin-icon",
"customElement": true,
"attributes": [
{
"name": "char",
"type": {
"text": "string"
},
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
"fieldName": "char",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "class",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "font-family",
"type": {
"text": "string"
},
"description": "The font family to use for the font icon.",
"fieldName": "fontFamily",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "icon",
"type": {
"text": "string"
},
"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`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"fieldName": "icon",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "icon-class",
"type": {
"text": "string"
},
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
"fieldName": "iconClass",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "ligature",
"type": {
"text": "string"
},
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
"fieldName": "ligature",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "size",
"type": {
"text": "number"
},
"description": "The size of an icon, used to set the `viewBox` attribute.",
"fieldName": "size",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "src",
"type": {
"text": "string"
},
"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",
"fieldName": "src",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
},
{
"name": "symbol",
"type": {
"text": "string"
},
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
"fieldName": "symbol",
"inheritedFrom": {
"name": "IconMixin",
"module": "src/vaadin-icon-mixin.js"
}
}
],
"events": []
}
],
"exports": [
{
"kind": "js",
"name": "Icon",
"declaration": {
"name": "Icon",
"module": "src/vaadin-icon.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-iconset-mixin.js",
"declarations": [
{
"kind": "mixin",
"description": "",
"name": "IconsetMixin",
"members": [
{
"kind": "field",
"name": "attachedIcons",
"static": true,
"description": "Set of the `vaadin-icon` instances in the DOM.",
"return": {
"type": {
"text": "Set<Icon>"
}
},
"readonly": true
},
{
"kind": "method",
"name": "getIconset",
"static": true,
"parameters": [
{
"name": "name",
"type": {
"text": "string"
}
}
],
"description": "Returns an instance of the iconset by its name.",
"return": {
"type": {
"text": "Iconset"
}
}
},
{
"kind": "method",
"name": "getIconSvg",
"static": true,
"parameters": [
{
"name": "icon",
"type": {
"text": "string"
}
},
{
"name": "name",
"type": {
"text": "?string"
}
}
],
"description": "Returns SVGTemplateResult for the `icon` ID matching `name` of the\niconset, or `nothing` literal if there is no matching icon found."
},
{
"kind": "field",
"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`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
"return": {
"type": {
"text": "string"
}
},
"type": {
"text": "string"
}
},
{
"kind": "method",
"name": "register",
"static": true,
"parameters": [
{
"name": "name",
"type": {
"text": "string"
}
},
{
"name": "size",
"type": {
"text": "number"
}
},
{
"name": "template",
"type": {
"text": "?HTMLTemplateElement"
}
}
],
"description": "Register an iconset without adding to the DOM."
},
{
"kind": "field",
"name": "size",
"description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
"return": {
"type": {
"text": "number"
}
},
"type": {
"text": "number"
}
}
],
"attributes": [
{
"name": "name"
},
{
"name": "size"
}
],
"parameters": [
{
"name": "superClass"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "IconsetMixin",
"declaration": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-iconset.js",
"declarations": [
{
"kind": "class",
"description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
"name": "Iconset",
"members": [
{
"kind": "field",
"name": "attachedIcons",
"static": true,
"description": "Set of the `vaadin-icon` instances in the DOM.",
"return": {
"type": {
"text": "Set<Icon>"
}
},
"readonly": true,
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
},
{
"kind": "method",
"name": "getIconset",
"static": true,
"parameters": [
{
"name": "name",
"type": {
"text": "string"
}
}
],
"description": "Returns an instance of the iconset by its name.",
"return": {
"type": {
"text": "Iconset"
}
},
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
},
{
"kind": "method",
"name": "getIconSvg",
"static": true,
"parameters": [
{
"name": "icon",
"type": {
"text": "string"
}
},
{
"name": "name",
"type": {
"text": "?string"
}
}
],
"description": "Returns SVGTemplateResult for the `icon` ID matching `name` of the\niconset, or `nothing` literal if there is no matching icon found.",
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
},
{
"kind": "field",
"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`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
"return": {
"type": {
"text": "string"
}
},
"type": {
"text": "string"
},
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
},
{
"kind": "method",
"name": "register",
"static": true,
"parameters": [
{
"name": "name",
"type": {
"text": "string"
}
},
{
"name": "size",
"type": {
"text": "number"
}
},
{
"name": "template",
"type": {
"text": "?HTMLTemplateElement"
}
}
],
"description": "Register an iconset without adding to the DOM.",
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
},
{
"kind": "field",
"name": "size",
"description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
"return": {
"type": {
"text": "number"
}
},
"type": {
"text": "number"
},
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
}
],
"mixins": [
{
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
],
"superclass": {
"name": "HTMLElement"
},
"tagName": "vaadin-iconset",
"customElement": true,
"attributes": [
{
"name": "name",
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
},
{
"name": "size",
"inheritedFrom": {
"name": "IconsetMixin",
"module": "src/vaadin-iconset-mixin.js"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "Iconset",
"declaration": {
"name": "Iconset",
"module": "src/vaadin-iconset.js"
}
}
]
}
]
}
+10
-8
package.json
{
"name": "@vaadin/icon",
"version": "25.1.0-alpha6",
"version": "25.1.0-alpha7",
"publishConfig": {

@@ -26,2 +26,3 @@ "access": "public"

"vaadin-*.js",
"custom-elements.json",
"web-types.json",

@@ -38,14 +39,15 @@ "web-types.lit.json"

"@open-wc/dedupe-mixin": "^1.3.0",
"@vaadin/component-base": "25.1.0-alpha6",
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha6",
"@vaadin/component-base": "25.1.0-alpha7",
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha7",
"lit": "^3.0.0"
},
"devDependencies": {
"@vaadin/aura": "25.1.0-alpha6",
"@vaadin/chai-plugins": "25.1.0-alpha6",
"@vaadin/test-runner-commands": "25.1.0-alpha6",
"@vaadin/aura": "25.1.0-alpha7",
"@vaadin/chai-plugins": "25.1.0-alpha7",
"@vaadin/test-runner-commands": "25.1.0-alpha7",
"@vaadin/testing-helpers": "^2.0.0",
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha6",
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha7",
"sinon": "^21.0.0"
},
"customElements": "custom-elements.json",
"web-types": [

@@ -55,3 +57,3 @@ "web-types.json",

],
"gitHead": "da6f4194492cbd77d18c6c1cd8d4d9f072e9ce8d"
"gitHead": "98c586125f769c8fefd307536965293668fda81d"
}
+1
-1
src/styles/vaadin-icon-base-styles.js

@@ -10,3 +10,3 @@ /**

:host {
display: inline-flex !important;
display: inline-flex;
justify-content: center !important;

@@ -13,0 +13,0 @@ align-items: center !important;

+1
-1
src/vaadin-icon.js

@@ -75,3 +75,3 @@ /**

*
* @customElement
* @customElement vaadin-icon
* @extends HTMLElement

@@ -78,0 +78,0 @@ * @mixes IconMixin

+1
-1
src/vaadin-iconset.js

@@ -12,3 +12,3 @@ /**

*
* @customElement
* @customElement vaadin-iconset
* @extends HTMLElement

@@ -15,0 +15,0 @@ * @mixes IconsetMixin

+5
-5
web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/icon",
"version": "25.1.0-alpha6",
"version": "25.1.0-alpha7",
"description-markup": "markdown",

@@ -29,3 +29,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/25.1.0-alpha6/#/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/25.1.0-alpha7/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
"value": {

@@ -52,7 +52,7 @@ "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/25.1.0-alpha6/#/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/25.1.0-alpha6/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"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/25.1.0-alpha7/#/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/25.1.0-alpha7/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"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/25.1.0-alpha6/#/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/25.1.0-alpha7/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"value": {

@@ -145,3 +145,3 @@ "type": [

"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/25.1.0-alpha6/#/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/25.1.0-alpha7/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"value": {

@@ -148,0 +148,0 @@ "type": [

+4
-4
web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/icon",
"version": "25.1.0-alpha6",
"version": "25.1.0-alpha7",
"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/25.1.0-alpha6/#/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/25.1.0-alpha7/#/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/25.1.0-alpha6/#/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/25.1.0-alpha6/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"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/25.1.0-alpha7/#/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/25.1.0-alpha7/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"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/25.1.0-alpha6/#/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/25.1.0-alpha7/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
"value": {

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