@vaadin/icon 24.2.0-alpha12 → 24.2.0-alpha14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -5
- package/src/vaadin-icon-font-size-mixin.d.ts +16 -0
- package/src/vaadin-icon-font-size-mixin.js +76 -0
- package/src/vaadin-icon-helpers.js +52 -0
- package/src/vaadin-icon.d.ts +4 -1
- package/src/vaadin-icon.js +8 -34
- package/web-types.json +6 -6
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/icon",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-alpha14",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/component-base": "24.2.0-
|
|
39
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
38
|
+
"@vaadin/component-base": "24.2.0-alpha14",
|
|
39
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha14",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha14",
|
|
41
41
|
"lit": "^2.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"web-types.json",
|
|
50
50
|
"web-types.lit.json"
|
|
51
51
|
],
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "203a2fda8d879db6ee8bccd7cf5b915de3e5008b"
|
|
53
53
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Mixin which enables the font icon sizing fallback for browsers that do not support CSS Container Queries.
|
|
10
|
+
* The mixin does nothing if the browser supports CSS Container Query units for pseudo elements.
|
|
11
|
+
*/
|
|
12
|
+
export declare function IconFontSizeMixin<T extends Constructor<HTMLElement>>(
|
|
13
|
+
base: T,
|
|
14
|
+
): Constructor<IconFontSizeMixinClass> & T;
|
|
15
|
+
|
|
16
|
+
export declare class IconFontSizeMixinClass {}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
|
|
7
|
+
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
8
|
+
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
|
+
import { needsFontIconSizingFallback } from './vaadin-icon-helpers.js';
|
|
10
|
+
|
|
11
|
+
const usesFontIconSizingFallback = needsFontIconSizingFallback();
|
|
12
|
+
|
|
13
|
+
if (usesFontIconSizingFallback) {
|
|
14
|
+
registerStyles(
|
|
15
|
+
'vaadin-icon',
|
|
16
|
+
css`
|
|
17
|
+
:host::after,
|
|
18
|
+
:host::before {
|
|
19
|
+
font-size: var(--_vaadin-font-icon-size);
|
|
20
|
+
}
|
|
21
|
+
`,
|
|
22
|
+
'vaadin-icon-font-size-mixin-styles',
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Mixin which enables the font icon sizing fallback for browsers that do not support CSS Container Queries.
|
|
28
|
+
* The mixin does nothing if the browser supports CSS Container Query units for pseudo elements.
|
|
29
|
+
*
|
|
30
|
+
* @polymerMixin
|
|
31
|
+
*/
|
|
32
|
+
export const IconFontSizeMixin = dedupingMixin((superclass) =>
|
|
33
|
+
!usesFontIconSizingFallback
|
|
34
|
+
? superclass
|
|
35
|
+
: class extends ResizeMixin(superclass) {
|
|
36
|
+
static get observers() {
|
|
37
|
+
return ['__iconFontSizeMixinfontChanged(font, char)'];
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/** @protected */
|
|
41
|
+
ready() {
|
|
42
|
+
super.ready();
|
|
43
|
+
|
|
44
|
+
// Update once initially to avoid a fouc
|
|
45
|
+
this.__updateFontIconSize();
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/** @private */
|
|
49
|
+
__iconFontSizeMixinfontChanged(font, char) {
|
|
50
|
+
// Update when font or char changes
|
|
51
|
+
this.__updateFontIconSize();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* @protected
|
|
56
|
+
* @override
|
|
57
|
+
*/
|
|
58
|
+
_onResize() {
|
|
59
|
+
// Update when the element is resized
|
|
60
|
+
this.__updateFontIconSize();
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Updates the --_vaadin-font-icon-size CSS variable value if char or font is set (font icons in use).
|
|
65
|
+
*
|
|
66
|
+
* @private
|
|
67
|
+
*/
|
|
68
|
+
__updateFontIconSize() {
|
|
69
|
+
if (this.char || this.font) {
|
|
70
|
+
const { paddingTop, paddingBottom, height } = getComputedStyle(this);
|
|
71
|
+
const fontIconSize = parseFloat(height) - parseFloat(paddingTop) - parseFloat(paddingBottom);
|
|
72
|
+
this.style.setProperty('--_vaadin-font-icon-size', `${fontIconSize}px`);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
);
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2016 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { isSafari } from '@vaadin/component-base/src/browser-utils.js';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Checks if the current browser supports CSS Container Query units for pseudo elements.
|
|
11
|
+
* i.e. if the fix for https://bugs.webkit.org/show_bug.cgi?id=253939 is available.
|
|
12
|
+
*/
|
|
13
|
+
export function supportsCQUnitsForPseudoElements() {
|
|
14
|
+
const testStyle = document.createElement('style');
|
|
15
|
+
testStyle.textContent = `
|
|
16
|
+
.vaadin-icon-test-element {
|
|
17
|
+
container-type: size;
|
|
18
|
+
height: 2px;
|
|
19
|
+
visibility: hidden;
|
|
20
|
+
position: fixed;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.vaadin-icon-test-element::before {
|
|
24
|
+
content: '';
|
|
25
|
+
display: block;
|
|
26
|
+
height: 100cqh;
|
|
27
|
+
`;
|
|
28
|
+
const testElement = document.createElement('div');
|
|
29
|
+
testElement.classList.add('vaadin-icon-test-element');
|
|
30
|
+
|
|
31
|
+
document.body.append(testStyle, testElement);
|
|
32
|
+
const { height } = getComputedStyle(testElement, '::before');
|
|
33
|
+
testStyle.remove();
|
|
34
|
+
testElement.remove();
|
|
35
|
+
return height === '2px';
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Checks if the current browser needs a fallback for sizing font icons instead of relying on CSS Container Queries.
|
|
40
|
+
*/
|
|
41
|
+
export function needsFontIconSizingFallback() {
|
|
42
|
+
if (!CSS.supports('container-type: inline-size')) {
|
|
43
|
+
// The browser does not support CSS Container Queries at all.
|
|
44
|
+
return true;
|
|
45
|
+
}
|
|
46
|
+
if (!isSafari) {
|
|
47
|
+
// Browsers other than Safari support CSS Container Queries as expected.
|
|
48
|
+
return false;
|
|
49
|
+
}
|
|
50
|
+
// Check if the browser does not support CSS Container Query units for pseudo elements.
|
|
51
|
+
return !supportsCQUnitsForPseudoElements();
|
|
52
|
+
}
|
package/src/vaadin-icon.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
|
|
|
7
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
8
|
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
9
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
+
import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
|
|
10
11
|
import type { IconSvgLiteral } from './vaadin-icon-svg.js';
|
|
11
12
|
|
|
12
13
|
/**
|
|
@@ -48,7 +49,9 @@ import type { IconSvgLiteral } from './vaadin-icon-svg.js';
|
|
|
48
49
|
* }
|
|
49
50
|
* ```
|
|
50
51
|
*/
|
|
51
|
-
declare class Icon extends ThemableMixin(
|
|
52
|
+
declare class Icon extends ThemableMixin(
|
|
53
|
+
ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(HTMLElement)))),
|
|
54
|
+
) {
|
|
52
55
|
/**
|
|
53
56
|
* The name of the icon to use. The name should be of the form:
|
|
54
57
|
* `iconset_name:icon_name`. When using `vaadin-icons` it is possible
|
package/src/vaadin-icon.js
CHANGED
|
@@ -5,22 +5,15 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
7
|
import { svg } from 'lit';
|
|
8
|
-
import { isSafari } from '@vaadin/component-base/src/browser-utils.js';
|
|
9
8
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
10
9
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
-
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
12
10
|
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
13
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
14
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
+
import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
|
|
15
14
|
import { ensureSvgLiteral, renderSvg, unsafeSvgLiteral } from './vaadin-icon-svg.js';
|
|
16
15
|
import { Iconset } from './vaadin-iconset.js';
|
|
17
16
|
|
|
18
|
-
const supportsCSSContainerQueries = CSS.supports('container-type: inline-size');
|
|
19
|
-
const needsFontIconSizingFallback = !supportsCSSContainerQueries || isSafari;
|
|
20
|
-
// ResizeObserver-based fallback for browsers without CSS Container Queries support (Safari 15)
|
|
21
|
-
// or buggy Container Queries support for pseudo elements (Safari 16)
|
|
22
|
-
const ConditionalResizeMixin = (superClass) => (needsFontIconSizingFallback ? ResizeMixin(superClass) : superClass);
|
|
23
|
-
|
|
24
17
|
/**
|
|
25
18
|
* `<vaadin-icon>` is a Web Component for displaying SVG icons.
|
|
26
19
|
*
|
|
@@ -65,10 +58,9 @@ const ConditionalResizeMixin = (superClass) => (needsFontIconSizingFallback ? Re
|
|
|
65
58
|
* @mixes ThemableMixin
|
|
66
59
|
* @mixes ElementMixin
|
|
67
60
|
* @mixes SlotStylesMixin
|
|
61
|
+
* @mixes IconFontSizeMixin
|
|
68
62
|
*/
|
|
69
|
-
class Icon extends ThemableMixin(
|
|
70
|
-
ElementMixin(ControllerMixin(SlotStylesMixin(ConditionalResizeMixin(PolymerElement)))),
|
|
71
|
-
) {
|
|
63
|
+
class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(PolymerElement))))) {
|
|
72
64
|
static get template() {
|
|
73
65
|
return html`
|
|
74
66
|
<style>
|
|
@@ -87,7 +79,7 @@ class Icon extends ThemableMixin(
|
|
|
87
79
|
:host::after,
|
|
88
80
|
:host::before {
|
|
89
81
|
line-height: 1;
|
|
90
|
-
font-size:
|
|
82
|
+
font-size: 100cqh;
|
|
91
83
|
}
|
|
92
84
|
|
|
93
85
|
:host([hidden]) {
|
|
@@ -254,9 +246,6 @@ class Icon extends ThemableMixin(
|
|
|
254
246
|
|
|
255
247
|
this._tooltipController = new TooltipController(this);
|
|
256
248
|
this.addController(this._tooltipController);
|
|
257
|
-
|
|
258
|
-
// Call once initially to avoid a fouc
|
|
259
|
-
this._onResize();
|
|
260
249
|
}
|
|
261
250
|
|
|
262
251
|
/** @protected */
|
|
@@ -369,13 +358,10 @@ class Icon extends ThemableMixin(
|
|
|
369
358
|
this.classList.add(...this.__addedFontClasses);
|
|
370
359
|
}
|
|
371
360
|
|
|
372
|
-
if (font || char) {
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
this.icon = '';
|
|
377
|
-
}
|
|
378
|
-
this._onResize();
|
|
361
|
+
if ((font || char) && !this.icon) {
|
|
362
|
+
// The "icon" attribute needs to be set on the host also when using font icons
|
|
363
|
+
// to avoid issues such as https://github.com/vaadin/web-components/issues/6301
|
|
364
|
+
this.icon = '';
|
|
379
365
|
}
|
|
380
366
|
}
|
|
381
367
|
|
|
@@ -383,18 +369,6 @@ class Icon extends ThemableMixin(
|
|
|
383
369
|
__fontFamilyChanged(fontFamily) {
|
|
384
370
|
this.style.fontFamily = fontFamily;
|
|
385
371
|
}
|
|
386
|
-
|
|
387
|
-
/**
|
|
388
|
-
* @protected
|
|
389
|
-
* @override
|
|
390
|
-
*/
|
|
391
|
-
_onResize() {
|
|
392
|
-
if (needsFontIconSizingFallback && (this.char || this.font)) {
|
|
393
|
-
const { paddingTop, paddingBottom, height } = getComputedStyle(this);
|
|
394
|
-
const fontIconSize = parseFloat(height) - parseFloat(paddingTop) - parseFloat(paddingBottom);
|
|
395
|
-
this.style.setProperty('--_vaadin-font-icon-size', `${fontIconSize}px`);
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
372
|
}
|
|
399
373
|
|
|
400
374
|
customElements.define(Icon.is, Icon);
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/icon",
|
|
4
|
-
"version": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha14",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "name",
|
|
15
|
-
"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.2.0-
|
|
15
|
+
"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.2.0-alpha14/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"string",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"properties": [
|
|
49
49
|
{
|
|
50
50
|
"name": "name",
|
|
51
|
-
"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.2.0-
|
|
51
|
+
"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.2.0-alpha14/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
52
52
|
"value": {
|
|
53
53
|
"type": [
|
|
54
54
|
"string",
|
|
@@ -74,11 +74,11 @@
|
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"name": "vaadin-icon",
|
|
77
|
-
"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.2.0-
|
|
77
|
+
"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.2.0-alpha14/#/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.2.0-alpha14/#/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```",
|
|
78
78
|
"attributes": [
|
|
79
79
|
{
|
|
80
80
|
"name": "icon",
|
|
81
|
-
"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.2.0-
|
|
81
|
+
"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.2.0-alpha14/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
84
|
"string"
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
"properties": [
|
|
151
151
|
{
|
|
152
152
|
"name": "icon",
|
|
153
|
-
"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.2.0-
|
|
153
|
+
"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.2.0-alpha14/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
154
154
|
"value": {
|
|
155
155
|
"type": [
|
|
156
156
|
"string"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/icon",
|
|
4
|
-
"version": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha14",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
23
|
"name": ".name",
|
|
24
|
-
"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.2.0-
|
|
24
|
+
"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.2.0-alpha14/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "vaadin-icon",
|
|
40
|
-
"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.2.0-
|
|
40
|
+
"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.2.0-alpha14/#/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.2.0-alpha14/#/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```",
|
|
41
41
|
"extension": true,
|
|
42
42
|
"attributes": [
|
|
43
43
|
{
|
|
44
44
|
"name": ".icon",
|
|
45
|
-
"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.2.0-
|
|
45
|
+
"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.2.0-alpha14/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|