@vaadin/icon 24.2.0-alpha9 → 24.2.0-beta2
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 +51 -1
- package/src/vaadin-icon.js +239 -7
- package/src/vaadin-iconset.js +3 -1
- package/web-types.json +63 -24
- package/web-types.lit.json +46 -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-beta2",
|
|
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-beta2",
|
|
39
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-beta2",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-beta2",
|
|
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": "4b852f9a12d4dade7f0fb3c73b7212436cebf310"
|
|
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(iconClass, 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(_iconClass, _char, _ligature) {
|
|
50
|
+
// Update when iconClass, char or ligature 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 font icons are used.
|
|
65
|
+
*
|
|
66
|
+
* @private
|
|
67
|
+
*/
|
|
68
|
+
__updateFontIconSize() {
|
|
69
|
+
if (this.char || this.iconClass || 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
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
7
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
|
+
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
8
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
+
import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
|
|
9
11
|
import type { IconSvgLiteral } from './vaadin-icon-svg.js';
|
|
10
12
|
|
|
11
13
|
/**
|
|
@@ -47,7 +49,9 @@ import type { IconSvgLiteral } from './vaadin-icon-svg.js';
|
|
|
47
49
|
* }
|
|
48
50
|
* ```
|
|
49
51
|
*/
|
|
50
|
-
declare class Icon extends ThemableMixin(
|
|
52
|
+
declare class Icon extends ThemableMixin(
|
|
53
|
+
ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(HTMLElement)))),
|
|
54
|
+
) {
|
|
51
55
|
/**
|
|
52
56
|
* The name of the icon to use. The name should be of the form:
|
|
53
57
|
* `iconset_name:icon_name`. When using `vaadin-icons` it is possible
|
|
@@ -57,6 +61,8 @@ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElemen
|
|
|
57
61
|
* values provided by the corresponding `vaadin-iconset` element.
|
|
58
62
|
*
|
|
59
63
|
* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
|
|
64
|
+
*
|
|
65
|
+
* @attr {string} icon
|
|
60
66
|
*/
|
|
61
67
|
icon: string | null;
|
|
62
68
|
|
|
@@ -65,6 +71,50 @@ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElemen
|
|
|
65
71
|
*/
|
|
66
72
|
svg: IconSvgLiteral | null;
|
|
67
73
|
|
|
74
|
+
/**
|
|
75
|
+
* The SVG source to be loaded as the icon. It can be:
|
|
76
|
+
* - an URL to a file containing the icon
|
|
77
|
+
* - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
|
|
78
|
+
* inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
|
|
79
|
+
* - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
|
|
80
|
+
* function for the SVG content passed
|
|
81
|
+
*/
|
|
82
|
+
src: string | null;
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* The symbol identifier that references an ID of an element contained in the SVG element assigned to the
|
|
86
|
+
* `src` property
|
|
87
|
+
*/
|
|
88
|
+
symbol: string | null;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Class names defining an icon font and/or a specific glyph inside an icon font.
|
|
92
|
+
*
|
|
93
|
+
* Example: "fa-solid fa-user"
|
|
94
|
+
*
|
|
95
|
+
* @attr {string} icon-class
|
|
96
|
+
*/
|
|
97
|
+
iconClass: string | null;
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* A hexadecimal code point that specifies a glyph from an icon font.
|
|
101
|
+
*
|
|
102
|
+
* Example: "e001"
|
|
103
|
+
*/
|
|
104
|
+
char: string | null;
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* A ligature name that specifies an icon from an icon font with support for ligatures.
|
|
108
|
+
*
|
|
109
|
+
* Example: "home".
|
|
110
|
+
*/
|
|
111
|
+
ligature: string | null;
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* The font family to use for the font icon.
|
|
115
|
+
*/
|
|
116
|
+
fontFamily: string | null;
|
|
117
|
+
|
|
68
118
|
/**
|
|
69
119
|
* The size of an icon, used to set the `viewBox` attribute.
|
|
70
120
|
*/
|
package/src/vaadin-icon.js
CHANGED
|
@@ -5,12 +5,17 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
7
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
|
+
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
9
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
|
+
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
9
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
10
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
|
-
import {
|
|
13
|
+
import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
|
|
14
|
+
import { ensureSvgLiteral, renderSvg, unsafeSvgLiteral } from './vaadin-icon-svg.js';
|
|
12
15
|
import { Iconset } from './vaadin-iconset.js';
|
|
13
16
|
|
|
17
|
+
const srcCache = new Map();
|
|
18
|
+
|
|
14
19
|
/**
|
|
15
20
|
* `<vaadin-icon>` is a Web Component for displaying SVG icons.
|
|
16
21
|
*
|
|
@@ -50,12 +55,15 @@ import { Iconset } from './vaadin-iconset.js';
|
|
|
50
55
|
* }
|
|
51
56
|
* ```
|
|
52
57
|
*
|
|
58
|
+
* @customElement
|
|
53
59
|
* @extends HTMLElement
|
|
54
60
|
* @mixes ControllerMixin
|
|
55
61
|
* @mixes ThemableMixin
|
|
56
62
|
* @mixes ElementMixin
|
|
63
|
+
* @mixes SlotStylesMixin
|
|
64
|
+
* @mixes IconFontSizeMixin
|
|
57
65
|
*/
|
|
58
|
-
class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement))) {
|
|
66
|
+
class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(PolymerElement))))) {
|
|
59
67
|
static get template() {
|
|
60
68
|
return html`
|
|
61
69
|
<style>
|
|
@@ -68,6 +76,16 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
68
76
|
width: 24px;
|
|
69
77
|
height: 24px;
|
|
70
78
|
fill: currentColor;
|
|
79
|
+
container-type: size;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:host::after,
|
|
83
|
+
:host::before {
|
|
84
|
+
line-height: 1;
|
|
85
|
+
font-size: 100cqh;
|
|
86
|
+
-webkit-font-smoothing: antialiased;
|
|
87
|
+
text-rendering: optimizeLegibility;
|
|
88
|
+
-moz-osx-font-smoothing: grayscale;
|
|
71
89
|
}
|
|
72
90
|
|
|
73
91
|
:host([hidden]) {
|
|
@@ -79,6 +97,14 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
79
97
|
width: 100%;
|
|
80
98
|
height: 100%;
|
|
81
99
|
}
|
|
100
|
+
|
|
101
|
+
:host(:is([icon-class], [font-icon-content])) svg {
|
|
102
|
+
display: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
:host([font-icon-content])::before {
|
|
106
|
+
content: attr(font-icon-content);
|
|
107
|
+
}
|
|
82
108
|
</style>
|
|
83
109
|
<svg
|
|
84
110
|
version="1.1"
|
|
@@ -87,7 +113,12 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
87
113
|
viewBox="[[__computeViewBox(size, __viewBox)]]"
|
|
88
114
|
preserveAspectRatio="[[__computePAR(__defaultPAR, __preserveAspectRatio)]]"
|
|
89
115
|
aria-hidden="true"
|
|
90
|
-
|
|
116
|
+
>
|
|
117
|
+
<g id="svg-group"></g>
|
|
118
|
+
<g id="use-group" visibility$="[[__computeVisibility(__useRef, svg)]]">
|
|
119
|
+
<use href$="[[__useRef]]" />
|
|
120
|
+
</g>
|
|
121
|
+
</svg>
|
|
91
122
|
|
|
92
123
|
<slot name="tooltip"></slot>
|
|
93
124
|
`;
|
|
@@ -108,9 +139,13 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
108
139
|
* values provided by the corresponding `vaadin-iconset` element.
|
|
109
140
|
*
|
|
110
141
|
* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
|
|
142
|
+
*
|
|
143
|
+
* @attr {string} icon
|
|
144
|
+
* @type {string}
|
|
111
145
|
*/
|
|
112
146
|
icon: {
|
|
113
147
|
type: String,
|
|
148
|
+
reflectToAttribute: true,
|
|
114
149
|
observer: '__iconChanged',
|
|
115
150
|
},
|
|
116
151
|
|
|
@@ -121,6 +156,75 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
121
156
|
type: Object,
|
|
122
157
|
},
|
|
123
158
|
|
|
159
|
+
/**
|
|
160
|
+
* The SVG source to be loaded as the icon. It can be:
|
|
161
|
+
* - an URL to a file containing the icon
|
|
162
|
+
* - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
|
|
163
|
+
* inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
|
|
164
|
+
* - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
|
|
165
|
+
* function for the SVG content passed
|
|
166
|
+
*
|
|
167
|
+
* @type {string}
|
|
168
|
+
*/
|
|
169
|
+
src: {
|
|
170
|
+
type: String,
|
|
171
|
+
},
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* The symbol identifier that references an ID of an element contained in the SVG element assigned to the
|
|
175
|
+
* `src` property
|
|
176
|
+
*
|
|
177
|
+
* @type {string}
|
|
178
|
+
*/
|
|
179
|
+
symbol: {
|
|
180
|
+
type: String,
|
|
181
|
+
},
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* Class names defining an icon font and/or a specific glyph inside an icon font.
|
|
185
|
+
*
|
|
186
|
+
* Example: "fa-solid fa-user"
|
|
187
|
+
*
|
|
188
|
+
* @attr {string} icon-class
|
|
189
|
+
* @type {string}
|
|
190
|
+
*/
|
|
191
|
+
iconClass: {
|
|
192
|
+
type: String,
|
|
193
|
+
reflectToAttribute: true,
|
|
194
|
+
},
|
|
195
|
+
|
|
196
|
+
/**
|
|
197
|
+
* A hexadecimal code point that specifies a glyph from an icon font.
|
|
198
|
+
*
|
|
199
|
+
* Example: "e001"
|
|
200
|
+
*
|
|
201
|
+
* @type {string}
|
|
202
|
+
*/
|
|
203
|
+
char: {
|
|
204
|
+
type: String,
|
|
205
|
+
},
|
|
206
|
+
|
|
207
|
+
/**
|
|
208
|
+
* A ligature name that specifies an icon from an icon font with support for ligatures.
|
|
209
|
+
*
|
|
210
|
+
* Example: "home".
|
|
211
|
+
*
|
|
212
|
+
* @type {string}
|
|
213
|
+
*/
|
|
214
|
+
ligature: {
|
|
215
|
+
type: String,
|
|
216
|
+
},
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* The font family to use for the font icon.
|
|
220
|
+
*
|
|
221
|
+
* @type {string}
|
|
222
|
+
*/
|
|
223
|
+
fontFamily: {
|
|
224
|
+
type: String,
|
|
225
|
+
observer: '__fontFamilyChanged',
|
|
226
|
+
},
|
|
227
|
+
|
|
124
228
|
/**
|
|
125
229
|
* The size of an icon, used to set the `viewBox` attribute.
|
|
126
230
|
*/
|
|
@@ -139,7 +243,10 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
139
243
|
__preserveAspectRatio: String,
|
|
140
244
|
|
|
141
245
|
/** @private */
|
|
142
|
-
|
|
246
|
+
__useRef: Object,
|
|
247
|
+
|
|
248
|
+
/** @private */
|
|
249
|
+
__svgElement: String,
|
|
143
250
|
|
|
144
251
|
/** @private */
|
|
145
252
|
__viewBox: String,
|
|
@@ -147,13 +254,42 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
147
254
|
}
|
|
148
255
|
|
|
149
256
|
static get observers() {
|
|
150
|
-
return ['__svgChanged(svg, __svgElement)'];
|
|
257
|
+
return ['__svgChanged(svg, __svgElement)', '__fontChanged(iconClass, char, ligature)', '__srcChanged(src, symbol)'];
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
static get observedAttributes() {
|
|
261
|
+
return [...super.observedAttributes, 'class'];
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
constructor() {
|
|
265
|
+
super();
|
|
266
|
+
|
|
267
|
+
this.__fetch = fetch.bind(window);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/** @protected */
|
|
271
|
+
get slotStyles() {
|
|
272
|
+
const tag = this.localName;
|
|
273
|
+
return [
|
|
274
|
+
`
|
|
275
|
+
${tag}[icon-class] {
|
|
276
|
+
display: inline-flex;
|
|
277
|
+
vertical-align: middle;
|
|
278
|
+
font-size: inherit;
|
|
279
|
+
}
|
|
280
|
+
`,
|
|
281
|
+
];
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/** @private */
|
|
285
|
+
get __iconClasses() {
|
|
286
|
+
return this.iconClass ? this.iconClass.split(' ') : [];
|
|
151
287
|
}
|
|
152
288
|
|
|
153
289
|
/** @protected */
|
|
154
290
|
ready() {
|
|
155
291
|
super.ready();
|
|
156
|
-
this.__svgElement = this.shadowRoot.querySelector('svg');
|
|
292
|
+
this.__svgElement = this.shadowRoot.querySelector('#svg-group');
|
|
157
293
|
|
|
158
294
|
this._tooltipController = new TooltipController(this);
|
|
159
295
|
this.addController(this._tooltipController);
|
|
@@ -201,6 +337,59 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
201
337
|
}
|
|
202
338
|
}
|
|
203
339
|
|
|
340
|
+
/** @private */
|
|
341
|
+
async __srcChanged(src, symbol) {
|
|
342
|
+
if (!src) {
|
|
343
|
+
this.svg = null;
|
|
344
|
+
return;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
// Need to add the "icon" attribute to avoid issues as described in
|
|
348
|
+
// https://github.com/vaadin/web-components/issues/6301
|
|
349
|
+
this.icon = '';
|
|
350
|
+
|
|
351
|
+
if (!src.startsWith('data:') && (symbol || src.includes('#'))) {
|
|
352
|
+
const [path, iconId] = src.split('#');
|
|
353
|
+
this.__useRef = `${path}#${symbol || iconId}`;
|
|
354
|
+
} else {
|
|
355
|
+
try {
|
|
356
|
+
if (!srcCache.has(src)) {
|
|
357
|
+
srcCache.set(
|
|
358
|
+
src,
|
|
359
|
+
this.__fetch(src, { mode: 'cors' }).then((data) => {
|
|
360
|
+
if (!data.ok) {
|
|
361
|
+
throw new Error('Error loading icon');
|
|
362
|
+
}
|
|
363
|
+
return data.text();
|
|
364
|
+
}),
|
|
365
|
+
);
|
|
366
|
+
}
|
|
367
|
+
const svgData = await srcCache.get(src);
|
|
368
|
+
|
|
369
|
+
if (!Icon.__domParser) {
|
|
370
|
+
Icon.__domParser = new DOMParser();
|
|
371
|
+
}
|
|
372
|
+
const parsedResponse = Icon.__domParser.parseFromString(svgData, 'text/html');
|
|
373
|
+
|
|
374
|
+
const svgElement = parsedResponse.querySelector('svg');
|
|
375
|
+
if (!svgElement) {
|
|
376
|
+
throw new Error(`SVG element not found on path: ${src}`);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
this.svg = unsafeSvgLiteral(svgElement.innerHTML);
|
|
380
|
+
|
|
381
|
+
if (symbol) {
|
|
382
|
+
this.__useRef = `#${symbol}`;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
this.__viewBox = svgElement.getAttribute('viewBox');
|
|
386
|
+
} catch (e) {
|
|
387
|
+
console.error(e);
|
|
388
|
+
this.svg = null;
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
|
|
204
393
|
/** @private */
|
|
205
394
|
__svgChanged(svg, svgElement) {
|
|
206
395
|
if (!svgElement) {
|
|
@@ -215,12 +404,55 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
215
404
|
return preserveAspectRatio || defaultPAR;
|
|
216
405
|
}
|
|
217
406
|
|
|
407
|
+
/** @private */
|
|
408
|
+
__computeVisibility(__useRef) {
|
|
409
|
+
return __useRef ? 'visible' : 'hidden';
|
|
410
|
+
}
|
|
411
|
+
|
|
218
412
|
/** @private */
|
|
219
413
|
__computeViewBox(size, viewBox) {
|
|
220
414
|
return viewBox || `0 0 ${size} ${size}`;
|
|
221
415
|
}
|
|
416
|
+
|
|
417
|
+
/** @private */
|
|
418
|
+
__fontChanged(iconClass, char, ligature) {
|
|
419
|
+
this.classList.remove(...(this.__addedIconClasses || []));
|
|
420
|
+
if (iconClass) {
|
|
421
|
+
this.__addedIconClasses = [...this.__iconClasses];
|
|
422
|
+
this.classList.add(...this.__addedIconClasses);
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
if (char) {
|
|
426
|
+
this.setAttribute('font-icon-content', char.length > 1 ? String.fromCodePoint(parseInt(char, 16)) : char);
|
|
427
|
+
} else if (ligature) {
|
|
428
|
+
this.setAttribute('font-icon-content', ligature);
|
|
429
|
+
} else {
|
|
430
|
+
this.removeAttribute('font-icon-content');
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
if ((iconClass || char || ligature) && !this.icon) {
|
|
434
|
+
// The "icon" attribute needs to be set on the host also when using font icons
|
|
435
|
+
// to avoid issues such as https://github.com/vaadin/web-components/issues/6301
|
|
436
|
+
this.icon = '';
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
/** @protected */
|
|
441
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
442
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
443
|
+
|
|
444
|
+
// Make sure class list always contains all the font class names
|
|
445
|
+
if (name === 'class' && this.__iconClasses.some((className) => !this.classList.contains(className))) {
|
|
446
|
+
this.classList.add(...this.__iconClasses);
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
/** @private */
|
|
451
|
+
__fontFamilyChanged(fontFamily) {
|
|
452
|
+
this.style.fontFamily = `'${fontFamily}'`;
|
|
453
|
+
}
|
|
222
454
|
}
|
|
223
455
|
|
|
224
|
-
|
|
456
|
+
defineCustomElement(Icon);
|
|
225
457
|
|
|
226
458
|
export { Icon };
|
package/src/vaadin-iconset.js
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
7
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
9
|
import { cloneSvgNode } from './vaadin-icon-svg.js';
|
|
9
10
|
|
|
@@ -37,6 +38,7 @@ function initIconsMap(iconset, name) {
|
|
|
37
38
|
/**
|
|
38
39
|
* `<vaadin-iconset>` is a Web Component for creating SVG icon collections.
|
|
39
40
|
*
|
|
41
|
+
* @customElement
|
|
40
42
|
* @extends HTMLElement
|
|
41
43
|
* @mixes ElementMixin
|
|
42
44
|
*/
|
|
@@ -184,6 +186,6 @@ class Iconset extends ElementMixin(PolymerElement) {
|
|
|
184
186
|
}
|
|
185
187
|
}
|
|
186
188
|
|
|
187
|
-
|
|
189
|
+
defineCustomElement(Iconset);
|
|
188
190
|
|
|
189
191
|
export { Iconset };
|
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-beta2",
|
|
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-beta2/#/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-beta2/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
52
52
|
"value": {
|
|
53
53
|
"type": [
|
|
54
54
|
"string",
|
|
@@ -74,27 +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-beta2/#/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-beta2/#/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
|
-
"null",
|
|
86
|
-
"undefined"
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
"name": "size",
|
|
92
|
-
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
|
93
|
-
"value": {
|
|
94
|
-
"type": [
|
|
95
|
-
"number",
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
84
|
+
""
|
|
98
85
|
]
|
|
99
86
|
}
|
|
100
87
|
},
|
|
@@ -114,12 +101,10 @@
|
|
|
114
101
|
"properties": [
|
|
115
102
|
{
|
|
116
103
|
"name": "icon",
|
|
117
|
-
"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-beta2/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
118
105
|
"value": {
|
|
119
106
|
"type": [
|
|
120
|
-
"string"
|
|
121
|
-
"null",
|
|
122
|
-
"undefined"
|
|
107
|
+
"string"
|
|
123
108
|
]
|
|
124
109
|
}
|
|
125
110
|
},
|
|
@@ -134,6 +119,60 @@
|
|
|
134
119
|
]
|
|
135
120
|
}
|
|
136
121
|
},
|
|
122
|
+
{
|
|
123
|
+
"name": "src",
|
|
124
|
+
"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",
|
|
125
|
+
"value": {
|
|
126
|
+
"type": [
|
|
127
|
+
"string"
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"name": "symbol",
|
|
133
|
+
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
134
|
+
"value": {
|
|
135
|
+
"type": [
|
|
136
|
+
"string"
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"name": "iconClass",
|
|
142
|
+
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
143
|
+
"value": {
|
|
144
|
+
"type": [
|
|
145
|
+
"string"
|
|
146
|
+
]
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"name": "char",
|
|
151
|
+
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
152
|
+
"value": {
|
|
153
|
+
"type": [
|
|
154
|
+
"string"
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"name": "ligature",
|
|
160
|
+
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
161
|
+
"value": {
|
|
162
|
+
"type": [
|
|
163
|
+
"string"
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "fontFamily",
|
|
169
|
+
"description": "The font family to use for the font icon.",
|
|
170
|
+
"value": {
|
|
171
|
+
"type": [
|
|
172
|
+
"string"
|
|
173
|
+
]
|
|
174
|
+
}
|
|
175
|
+
},
|
|
137
176
|
{
|
|
138
177
|
"name": "size",
|
|
139
178
|
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
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-beta2",
|
|
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-beta2/#/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-beta2/#/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-beta2/#/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-beta2/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
@@ -54,6 +54,48 @@
|
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".src",
|
|
59
|
+
"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",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".symbol",
|
|
66
|
+
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".iconClass",
|
|
73
|
+
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".char",
|
|
80
|
+
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".ligature",
|
|
87
|
+
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": ".fontFamily",
|
|
94
|
+
"description": "The font family to use for the font icon.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
57
99
|
{
|
|
58
100
|
"name": ".size",
|
|
59
101
|
"description": "The size of an icon, used to set the `viewBox` attribute.",
|