@vaadin/icon 24.2.0-alpha13 → 24.2.0-alpha15
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 +13 -4
- package/src/vaadin-icon.js +56 -45
- package/web-types.json +18 -58
- package/web-types.lit.json +12 -5
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-alpha15",
|
|
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-alpha15",
|
|
39
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha15",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha15",
|
|
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": "043dbb1c2513685a98354921876d35fa18bca7a2"
|
|
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, ligature)'];
|
|
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, _ligature) {
|
|
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 || this.ligature) {
|
|
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
|
|
@@ -86,13 +89,19 @@ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStyles
|
|
|
86
89
|
font: string | null;
|
|
87
90
|
|
|
88
91
|
/**
|
|
89
|
-
*
|
|
90
|
-
* Can be a code point or a ligature name.
|
|
92
|
+
* A hexadecimal code point that specifies a glyph from an icon font.
|
|
91
93
|
*
|
|
92
|
-
*
|
|
94
|
+
* Example: "e001"
|
|
93
95
|
*/
|
|
94
96
|
char: string | null;
|
|
95
97
|
|
|
98
|
+
/**
|
|
99
|
+
* A ligature name that specifies an icon from an icon font with support for ligatures.
|
|
100
|
+
*
|
|
101
|
+
* Example: "home".
|
|
102
|
+
*/
|
|
103
|
+
ligature: string | null;
|
|
104
|
+
|
|
96
105
|
/**
|
|
97
106
|
* The font family to use for the font icon.
|
|
98
107
|
*/
|
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]) {
|
|
@@ -100,12 +92,12 @@ class Icon extends ThemableMixin(
|
|
|
100
92
|
height: 100%;
|
|
101
93
|
}
|
|
102
94
|
|
|
103
|
-
:host(:is([font], [
|
|
95
|
+
:host(:is([font], [font-icon-content])) svg {
|
|
104
96
|
display: none;
|
|
105
97
|
}
|
|
106
98
|
|
|
107
|
-
:host([
|
|
108
|
-
content: attr(
|
|
99
|
+
:host([font-icon-content])::before {
|
|
100
|
+
content: attr(font-icon-content);
|
|
109
101
|
}
|
|
110
102
|
</style>
|
|
111
103
|
<svg
|
|
@@ -177,15 +169,25 @@ class Icon extends ThemableMixin(
|
|
|
177
169
|
},
|
|
178
170
|
|
|
179
171
|
/**
|
|
180
|
-
*
|
|
181
|
-
*
|
|
172
|
+
* A hexadecimal code point that specifies a glyph from an icon font.
|
|
173
|
+
*
|
|
174
|
+
* Example: "e001"
|
|
182
175
|
*
|
|
183
|
-
* @attr {string} char
|
|
184
176
|
* @type {string}
|
|
185
177
|
*/
|
|
186
178
|
char: {
|
|
187
179
|
type: String,
|
|
188
|
-
|
|
180
|
+
},
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* A ligature name that specifies an icon from an icon font with support for ligatures.
|
|
184
|
+
*
|
|
185
|
+
* Example: "home".
|
|
186
|
+
*
|
|
187
|
+
* @type {string}
|
|
188
|
+
*/
|
|
189
|
+
ligature: {
|
|
190
|
+
type: String,
|
|
189
191
|
},
|
|
190
192
|
|
|
191
193
|
/**
|
|
@@ -224,7 +226,11 @@ class Icon extends ThemableMixin(
|
|
|
224
226
|
}
|
|
225
227
|
|
|
226
228
|
static get observers() {
|
|
227
|
-
return ['__svgChanged(svg, __svgElement)', '__fontChanged(font, char)', '__srcChanged(src)'];
|
|
229
|
+
return ['__svgChanged(svg, __svgElement)', '__fontChanged(font, char, ligature)', '__srcChanged(src)'];
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
static get observedAttributes() {
|
|
233
|
+
return [...super.observedAttributes, 'class'];
|
|
228
234
|
}
|
|
229
235
|
|
|
230
236
|
constructor() {
|
|
@@ -247,6 +253,11 @@ class Icon extends ThemableMixin(
|
|
|
247
253
|
];
|
|
248
254
|
}
|
|
249
255
|
|
|
256
|
+
/** @private */
|
|
257
|
+
get __fontClasses() {
|
|
258
|
+
return this.font ? this.font.split(' ') : [];
|
|
259
|
+
}
|
|
260
|
+
|
|
250
261
|
/** @protected */
|
|
251
262
|
ready() {
|
|
252
263
|
super.ready();
|
|
@@ -254,9 +265,6 @@ class Icon extends ThemableMixin(
|
|
|
254
265
|
|
|
255
266
|
this._tooltipController = new TooltipController(this);
|
|
256
267
|
this.addController(this._tooltipController);
|
|
257
|
-
|
|
258
|
-
// Call once initially to avoid a fouc
|
|
259
|
-
this._onResize();
|
|
260
268
|
}
|
|
261
269
|
|
|
262
270
|
/** @protected */
|
|
@@ -362,39 +370,42 @@ class Icon extends ThemableMixin(
|
|
|
362
370
|
}
|
|
363
371
|
|
|
364
372
|
/** @private */
|
|
365
|
-
__fontChanged(font, char) {
|
|
373
|
+
__fontChanged(font, char, ligature) {
|
|
366
374
|
this.classList.remove(...(this.__addedFontClasses || []));
|
|
367
375
|
if (font) {
|
|
368
|
-
this.__addedFontClasses =
|
|
376
|
+
this.__addedFontClasses = [...this.__fontClasses];
|
|
369
377
|
this.classList.add(...this.__addedFontClasses);
|
|
370
378
|
}
|
|
371
379
|
|
|
372
|
-
if (
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
this._onResize();
|
|
380
|
+
if (char) {
|
|
381
|
+
this.setAttribute('font-icon-content', char.length > 1 ? String.fromCodePoint(parseInt(char, 16)) : char);
|
|
382
|
+
} else if (ligature) {
|
|
383
|
+
this.setAttribute('font-icon-content', ligature);
|
|
384
|
+
} else {
|
|
385
|
+
this.removeAttribute('font-icon-content');
|
|
379
386
|
}
|
|
380
|
-
}
|
|
381
387
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
388
|
+
if ((font || char || ligature) && !this.icon) {
|
|
389
|
+
// The "icon" attribute needs to be set on the host also when using font icons
|
|
390
|
+
// to avoid issues such as https://github.com/vaadin/web-components/issues/6301
|
|
391
|
+
this.icon = '';
|
|
392
|
+
}
|
|
385
393
|
}
|
|
386
394
|
|
|
387
|
-
/**
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
if (
|
|
393
|
-
|
|
394
|
-
const fontIconSize = parseFloat(height) - parseFloat(paddingTop) - parseFloat(paddingBottom);
|
|
395
|
-
this.style.setProperty('--_vaadin-font-icon-size', `${fontIconSize}px`);
|
|
395
|
+
/** @protected */
|
|
396
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
397
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
398
|
+
|
|
399
|
+
// Make sure class list always contains all the font class names
|
|
400
|
+
if (name === 'class' && this.__fontClasses.some((className) => !this.classList.contains(className))) {
|
|
401
|
+
this.classList.add(...this.__fontClasses);
|
|
396
402
|
}
|
|
397
403
|
}
|
|
404
|
+
|
|
405
|
+
/** @private */
|
|
406
|
+
__fontFamilyChanged(fontFamily) {
|
|
407
|
+
this.style.fontFamily = `'${fontFamily}'`;
|
|
408
|
+
}
|
|
398
409
|
}
|
|
399
410
|
|
|
400
411
|
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-alpha15",
|
|
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-alpha15/#/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-alpha15/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
52
52
|
"value": {
|
|
53
53
|
"type": [
|
|
54
54
|
"string",
|
|
@@ -74,63 +74,14 @@
|
|
|
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-alpha15/#/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-alpha15/#/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
|
-
"name": "
|
|
81
|
-
"description": "
|
|
80
|
+
"name": "class",
|
|
81
|
+
"description": "",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
|
-
"
|
|
85
|
-
]
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
"name": "src",
|
|
90
|
-
"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",
|
|
91
|
-
"value": {
|
|
92
|
-
"type": [
|
|
93
|
-
"string",
|
|
94
|
-
"null",
|
|
95
|
-
"undefined"
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"name": "font",
|
|
101
|
-
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.",
|
|
102
|
-
"value": {
|
|
103
|
-
"type": [
|
|
104
|
-
"string"
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
"name": "char",
|
|
110
|
-
"description": "The specific glyph from a font to use as an icon.\nCan be a code point or a ligature name.",
|
|
111
|
-
"value": {
|
|
112
|
-
"type": [
|
|
113
|
-
"string"
|
|
114
|
-
]
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
"name": "font-family",
|
|
119
|
-
"description": "The font family to use for the font icon.",
|
|
120
|
-
"value": {
|
|
121
|
-
"type": [
|
|
122
|
-
"string"
|
|
123
|
-
]
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
"name": "size",
|
|
128
|
-
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
|
129
|
-
"value": {
|
|
130
|
-
"type": [
|
|
131
|
-
"number",
|
|
132
|
-
"null",
|
|
133
|
-
"undefined"
|
|
84
|
+
""
|
|
134
85
|
]
|
|
135
86
|
}
|
|
136
87
|
},
|
|
@@ -150,7 +101,7 @@
|
|
|
150
101
|
"properties": [
|
|
151
102
|
{
|
|
152
103
|
"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-
|
|
104
|
+
"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-alpha15/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
154
105
|
"value": {
|
|
155
106
|
"type": [
|
|
156
107
|
"string"
|
|
@@ -190,7 +141,16 @@
|
|
|
190
141
|
},
|
|
191
142
|
{
|
|
192
143
|
"name": "char",
|
|
193
|
-
"description": "
|
|
144
|
+
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
145
|
+
"value": {
|
|
146
|
+
"type": [
|
|
147
|
+
"string"
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"name": "ligature",
|
|
153
|
+
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
194
154
|
"value": {
|
|
195
155
|
"type": [
|
|
196
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-alpha15",
|
|
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-alpha15/#/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-alpha15/#/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-alpha15/#/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-alpha15/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
@@ -70,7 +70,14 @@
|
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
"name": ".char",
|
|
73
|
-
"description": "
|
|
73
|
+
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".ligature",
|
|
80
|
+
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
74
81
|
"value": {
|
|
75
82
|
"kind": "expression"
|
|
76
83
|
}
|