@symbo.ls/icon 2.33.38 → 2.33.40
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/index.js +79 -61
- package/package.json +4 -4
package/index.js
CHANGED
|
@@ -1,22 +1,5 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
-
const inheritFromIsActive = (el) => {
|
|
4
|
-
const { props } = el
|
|
5
|
-
const propsActive = props['.isActive']
|
|
6
|
-
return el.call('exec', propsActive.name || propsActive.icon)
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const getIconName = (el, s) => {
|
|
10
|
-
const { key, props } = el
|
|
11
|
-
let icon = el.call('exec', props.name || props.icon || key, el)
|
|
12
|
-
|
|
13
|
-
if (el.call('isString', icon) && icon.includes('{{')) {
|
|
14
|
-
icon = el.call('replaceLiteralsWithObjectFields', icon)
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
return el.call('isString', icon) ? icon : key
|
|
18
|
-
}
|
|
19
|
-
|
|
20
3
|
export const Icon = {
|
|
21
4
|
extend: 'Svg',
|
|
22
5
|
props: (el, s, ctx) => {
|
|
@@ -24,6 +7,63 @@ export const Icon = {
|
|
|
24
7
|
const { ICONS, useIconSprite, verbose } = ctx && ctx.designSystem
|
|
25
8
|
const { toCamelCase } = ctx && ctx.utils
|
|
26
9
|
|
|
10
|
+
const inheritFromIsActive = (el) => {
|
|
11
|
+
const { props } = el
|
|
12
|
+
const propsActive = props['.isActive']
|
|
13
|
+
return el.call('exec', propsActive.name || propsActive.icon)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const getSemanticIcon = (el, s, ctx) => {
|
|
17
|
+
const { SEMANTIC_ICONS } = ctx && ctx.designSystem
|
|
18
|
+
const { toCamelCase } = ctx && ctx.utils
|
|
19
|
+
|
|
20
|
+
let iconName = getIconName(el, s)
|
|
21
|
+
const camelCase = toCamelCase(iconName)
|
|
22
|
+
const isArray = camelCase.split(/([a-z])([A-Z])/g)
|
|
23
|
+
const semanticIconRootName = isArray[1]
|
|
24
|
+
? isArray[0]
|
|
25
|
+
: iconName.split('.')[0].split(' ')[0]
|
|
26
|
+
const semanticIcon =
|
|
27
|
+
SEMANTIC_ICONS && SEMANTIC_ICONS[semanticIconRootName]
|
|
28
|
+
if (semanticIcon) {
|
|
29
|
+
const iconKey = iconName.includes('.')
|
|
30
|
+
? 'sfsymbols.' + iconName.split('.').slice(1).join('.')
|
|
31
|
+
: 'sfsymbols'
|
|
32
|
+
iconName =
|
|
33
|
+
semanticIcon[iconKey] ||
|
|
34
|
+
semanticIcon[iconName.split('.')[0].split(' ')[0]]
|
|
35
|
+
return {
|
|
36
|
+
tag: 'span',
|
|
37
|
+
semantic_symbols: true,
|
|
38
|
+
width: 'A',
|
|
39
|
+
height: 'A',
|
|
40
|
+
lineHeight: '1em',
|
|
41
|
+
':after': {
|
|
42
|
+
fontSize: 'Z',
|
|
43
|
+
fontWeight: '300',
|
|
44
|
+
content: `"${iconName}"`,
|
|
45
|
+
textAlign: 'center',
|
|
46
|
+
display: 'inline-block',
|
|
47
|
+
style: {
|
|
48
|
+
color: 'currentColor',
|
|
49
|
+
fontFamily: "'SF Pro Icons', 'SF Pro', 'SF Symbols', 'Segoe UI'"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const getIconName = (el, s) => {
|
|
57
|
+
const { key, props } = el
|
|
58
|
+
let icon = el.call('exec', props.name || props.icon || key, el)
|
|
59
|
+
|
|
60
|
+
if (el.call('isString', icon) && icon.includes('{{')) {
|
|
61
|
+
icon = el.call('replaceLiteralsWithObjectFields', icon)
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
return el.call('isString', icon) ? icon : key
|
|
65
|
+
}
|
|
66
|
+
|
|
27
67
|
const iconName = getIconName(el, s)
|
|
28
68
|
const camelCase = toCamelCase(iconName)
|
|
29
69
|
const isArray = camelCase.split(/([a-z])([A-Z])/g)
|
|
@@ -41,22 +81,30 @@ export const Icon = {
|
|
|
41
81
|
parentPropsActive &&
|
|
42
82
|
parentPropsActive.icon
|
|
43
83
|
) {
|
|
44
|
-
activeIconName = el.call(
|
|
45
|
-
|
|
84
|
+
activeIconName = el.call(
|
|
85
|
+
'exec',
|
|
86
|
+
parentPropsActive.icon ||
|
|
87
|
+
parentPropsActive.Icon.name ||
|
|
88
|
+
parentPropsActive.Icon.icon,
|
|
89
|
+
el
|
|
46
90
|
)
|
|
47
91
|
}
|
|
48
92
|
|
|
49
93
|
if (el.call('isString', activeIconName) && activeIconName.includes('{{')) {
|
|
50
|
-
activeIconName = el.call(
|
|
94
|
+
activeIconName = el.call(
|
|
95
|
+
'replaceLiteralsWithObjectFields',
|
|
96
|
+
activeIconName
|
|
97
|
+
)
|
|
51
98
|
}
|
|
52
99
|
|
|
53
100
|
let iconInContext
|
|
54
101
|
if (ICONS[activeIconName]) iconInContext = activeIconName
|
|
55
102
|
if (ICONS[camelCase]) iconInContext = camelCase
|
|
56
|
-
else if (ICONS[isArray[0] + isArray[1]])
|
|
103
|
+
else if (ICONS[isArray[0] + isArray[1]])
|
|
104
|
+
iconInContext = isArray[0] + isArray[1]
|
|
57
105
|
else if (ICONS[isArray[0]]) iconInContext = isArray[0]
|
|
58
106
|
else {
|
|
59
|
-
if (verbose) el.warn(
|
|
107
|
+
if (verbose) el.warn("Can't find icon:", iconName, iconInContext)
|
|
60
108
|
}
|
|
61
109
|
|
|
62
110
|
const iconFromLibrary = ICONS[iconInContext]
|
|
@@ -93,13 +141,16 @@ export const IconText = {
|
|
|
93
141
|
Icon: {
|
|
94
142
|
if: (el) => {
|
|
95
143
|
const { parent, props } = el
|
|
96
|
-
return el.call(
|
|
97
|
-
|
|
98
|
-
props.
|
|
99
|
-
|
|
100
|
-
|
|
144
|
+
return el.call(
|
|
145
|
+
'exec',
|
|
146
|
+
parent.props.icon ||
|
|
147
|
+
props.name ||
|
|
148
|
+
props.sfSymbols ||
|
|
149
|
+
parent.props.sfSymbols,
|
|
150
|
+
el
|
|
151
|
+
)
|
|
101
152
|
},
|
|
102
|
-
icon: el => el.call('exec', el.parent.props.icon, el.parent)
|
|
153
|
+
icon: (el) => el.call('exec', el.parent.props.icon, el.parent)
|
|
103
154
|
},
|
|
104
155
|
|
|
105
156
|
text: ({ props }) => props.text
|
|
@@ -119,36 +170,3 @@ export const FileIcon = {
|
|
|
119
170
|
icon: 'file'
|
|
120
171
|
}
|
|
121
172
|
}
|
|
122
|
-
|
|
123
|
-
const getSemanticIcon = (el, s, ctx) => {
|
|
124
|
-
const { SEMANTIC_ICONS } = ctx && ctx.designSystem
|
|
125
|
-
const { toCamelCase } = ctx && ctx.utils
|
|
126
|
-
|
|
127
|
-
let iconName = getIconName(el, s)
|
|
128
|
-
const camelCase = toCamelCase(iconName)
|
|
129
|
-
const isArray = camelCase.split(/([a-z])([A-Z])/g)
|
|
130
|
-
const semanticIconRootName = isArray[1] ? isArray[0] : iconName.split('.')[0].split(' ')[0]
|
|
131
|
-
const semanticIcon = SEMANTIC_ICONS && SEMANTIC_ICONS[semanticIconRootName]
|
|
132
|
-
if (semanticIcon) {
|
|
133
|
-
const iconKey = iconName.includes('.') ? 'sfsymbols.' + iconName.split('.').slice(1).join('.') : 'sfsymbols'
|
|
134
|
-
iconName = semanticIcon[iconKey] || semanticIcon[iconName.split('.')[0].split(' ')[0]]
|
|
135
|
-
return {
|
|
136
|
-
tag: 'span',
|
|
137
|
-
semantic_symbols: true,
|
|
138
|
-
width: 'A',
|
|
139
|
-
height: 'A',
|
|
140
|
-
lineHeight: '1em',
|
|
141
|
-
':after': {
|
|
142
|
-
fontSize: 'Z',
|
|
143
|
-
fontWeight: '300',
|
|
144
|
-
content: `"${iconName}"`,
|
|
145
|
-
textAlign: 'center',
|
|
146
|
-
display: 'inline-block',
|
|
147
|
-
style: {
|
|
148
|
-
color: 'currentColor',
|
|
149
|
-
fontFamily: "'SF Pro Icons', 'SF Pro', 'SF Symbols', 'Segoe UI'"
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbo.ls/icon",
|
|
3
|
-
"version": "2.33.
|
|
3
|
+
"version": "2.33.40",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"gitHead": "
|
|
6
|
+
"gitHead": "116c2647820d1a8cb0147eee069817c7d5b59f09",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@symbo.ls/atoms": "^2.33.
|
|
9
|
-
"@symbo.ls/utils": "^2.33.
|
|
8
|
+
"@symbo.ls/atoms": "^2.33.40",
|
|
9
|
+
"@symbo.ls/utils": "^2.33.40"
|
|
10
10
|
},
|
|
11
11
|
"source": "src/index.js"
|
|
12
12
|
}
|