You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@vaadin/icon

Package Overview
Dependencies
Maintainers
12
Versions
486
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.0.0-alpha4
to
25.0.0-alpha5

14

package.json
{
"name": "@vaadin/icon",
"version": "25.0.0-alpha4",
"version": "25.0.0-alpha5",
"publishConfig": {

@@ -40,10 +40,10 @@ "access": "public"

"@open-wc/dedupe-mixin": "^1.3.0",
"@vaadin/component-base": "25.0.0-alpha4",
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
"@vaadin/component-base": "25.0.0-alpha5",
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
"lit": "^3.0.0"
},
"devDependencies": {
"@vaadin/chai-plugins": "25.0.0-alpha4",
"@vaadin/test-runner-commands": "25.0.0-alpha4",
"@vaadin/chai-plugins": "25.0.0-alpha5",
"@vaadin/test-runner-commands": "25.0.0-alpha5",
"@vaadin/testing-helpers": "^2.0.0",

@@ -56,3 +56,3 @@ "sinon": "^18.0.0"

],
"gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
"gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
}

73

src/styles/vaadin-icon-base-styles.js

@@ -9,43 +9,46 @@ /**

export const iconStyles = css`
:host {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
vertical-align: middle;
width: var(--vaadin-icon-size, 1lh);
height: var(--vaadin-icon-size, 1lh);
fill: var(--vaadin-icon-color, currentColor);
container-type: size;
contain: layout;
}
@layer base {
:host {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
vertical-align: middle;
width: var(--vaadin-icon-size, 1lh);
height: var(--vaadin-icon-size, 1lh);
flex: none;
fill: var(--vaadin-icon-color, currentColor);
container-type: size;
contain: layout;
}
:host::after,
:host::before {
line-height: 1;
font-size: 100cqh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
: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;
}
: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;
}
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(:is([icon-class], [font-icon-content])) svg {
display: none;
}
:host([font-icon-content])::before {
content: attr(font-icon-content);
:host([font-icon-content])::before {
content: attr(font-icon-content);
}
}
`;

10

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

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

8

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

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