@semcore/icon 17.0.0-prerelease.2 → 17.0.0-prerelease.39
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/CHANGELOG.md +7 -1
- package/lib/ChevronDown/l/index.js +1 -3
- package/lib/ChevronDown/l/index.mjs +1 -3
- package/lib/ChevronDown/m/index.js +0 -2
- package/lib/ChevronDown/m/index.mjs +0 -2
- package/lib/Semrush/l/index.js +1 -1
- package/lib/Semrush/l/index.mjs +1 -1
- package/lib/Semrush/m/index.js +1 -1
- package/lib/Semrush/m/index.mjs +1 -1
- package/lib/cjs/Icon.js +30 -1
- package/lib/cjs/Icon.js.map +1 -1
- package/lib/es6/Icon.js +30 -1
- package/lib/es6/Icon.js.map +1 -1
- package/lib/esm/Icon.mjs +31 -3
- package/lib/types/Icon.d.ts +20 -2
- package/package.json +1167 -1167
- package/svg/icon/ChevronDown/l.svg +1 -1
- package/svg/icon/ChevronDown/m.svg +1 -1
- package/svg/icon/Semrush/l.svg +1 -1
- package/svg/icon/Semrush/m.svg +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,12 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [17.0.0] - 2026-
|
|
5
|
+
## [17.0.0] - 2026-04-14
|
|
6
6
|
|
|
7
7
|
### BREAK
|
|
8
8
|
|
|
9
9
|
- New major version as a separate package with icons.
|
|
10
10
|
|
|
11
|
+
## [16.7.5] - 2026-04-01
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- `Semrush` icon.
|
|
16
|
+
|
|
11
17
|
## [16.7.4] - 2026-01-19
|
|
12
18
|
|
|
13
19
|
### Fixed
|
|
@@ -24,9 +24,7 @@ function RootChevronDown({
|
|
|
24
24
|
height: height,
|
|
25
25
|
viewBox: viewBox
|
|
26
26
|
}, props), /*#__PURE__*/_react.default.createElement("path", {
|
|
27
|
-
|
|
28
|
-
clipRule: "evenodd",
|
|
29
|
-
d: "M3.293 7.293a1 1 0 0 1 1.414 0L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z",
|
|
27
|
+
d: "M3.293 9.293a1 1 0 0 1 1.414 0L12 16.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414",
|
|
30
28
|
shapeRendering: "geometricPrecision"
|
|
31
29
|
}));
|
|
32
30
|
}
|
|
@@ -17,9 +17,7 @@ function RootChevronDown({
|
|
|
17
17
|
height: height,
|
|
18
18
|
viewBox: viewBox
|
|
19
19
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
20
|
-
|
|
21
|
-
clipRule: "evenodd",
|
|
22
|
-
d: "M3.293 7.293a1 1 0 0 1 1.414 0L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z",
|
|
20
|
+
d: "M3.293 9.293a1 1 0 0 1 1.414 0L12 16.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414",
|
|
23
21
|
shapeRendering: "geometricPrecision"
|
|
24
22
|
}));
|
|
25
23
|
}
|
|
@@ -24,8 +24,6 @@ function RootChevronDown({
|
|
|
24
24
|
height: height,
|
|
25
25
|
viewBox: viewBox
|
|
26
26
|
}, props), /*#__PURE__*/_react.default.createElement("path", {
|
|
27
|
-
fillRule: "evenodd",
|
|
28
|
-
clipRule: "evenodd",
|
|
29
27
|
d: "M3.293 6.293a1 1 0 0 1 1.414 0L8 9.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z",
|
|
30
28
|
shapeRendering: "geometricPrecision"
|
|
31
29
|
}));
|
|
@@ -17,8 +17,6 @@ function RootChevronDown({
|
|
|
17
17
|
height: height,
|
|
18
18
|
viewBox: viewBox
|
|
19
19
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
20
|
-
fillRule: "evenodd",
|
|
21
|
-
clipRule: "evenodd",
|
|
22
20
|
d: "M3.293 6.293a1 1 0 0 1 1.414 0L8 9.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z",
|
|
23
21
|
shapeRendering: "geometricPrecision"
|
|
24
22
|
}));
|
package/lib/Semrush/l/index.js
CHANGED
|
@@ -24,7 +24,7 @@ function RootSemrush({
|
|
|
24
24
|
height: height,
|
|
25
25
|
viewBox: viewBox
|
|
26
26
|
}, props), /*#__PURE__*/_react.default.createElement("path", {
|
|
27
|
-
d: "
|
|
27
|
+
d: "M16.23 5.002C19.956 5.002 23 8.19 23 12S20.069 18.903 16.4 19H6.722l5.852-3.23H1l10.514-5.802H5.729l7.06-3.893C14.056 5.391 15.19 5 16.23 5z",
|
|
28
28
|
shapeRendering: "geometricPrecision"
|
|
29
29
|
}));
|
|
30
30
|
}
|
package/lib/Semrush/l/index.mjs
CHANGED
|
@@ -17,7 +17,7 @@ function RootSemrush({
|
|
|
17
17
|
height: height,
|
|
18
18
|
viewBox: viewBox
|
|
19
19
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
20
|
-
d: "
|
|
20
|
+
d: "M16.23 5.002C19.956 5.002 23 8.19 23 12S20.069 18.903 16.4 19H6.722l5.852-3.23H1l10.514-5.802H5.729l7.06-3.893C14.056 5.391 15.19 5 16.23 5z",
|
|
21
21
|
shapeRendering: "geometricPrecision"
|
|
22
22
|
}));
|
|
23
23
|
}
|
package/lib/Semrush/m/index.js
CHANGED
|
@@ -24,7 +24,7 @@ function RootSemrush({
|
|
|
24
24
|
height: height,
|
|
25
25
|
viewBox: viewBox
|
|
26
26
|
}, props), /*#__PURE__*/_react.default.createElement("path", {
|
|
27
|
-
d: "
|
|
27
|
+
d: "M11.077 3.002C13.786 3.002 16 5.279 16 8s-2.132 4.93-4.8 4.999H4.161l4.256-2.308H0l7.646-4.144H3.438l5.136-2.78C9.496 3.28 10.321 3 11.077 3z",
|
|
28
28
|
shapeRendering: "geometricPrecision"
|
|
29
29
|
}));
|
|
30
30
|
}
|
package/lib/Semrush/m/index.mjs
CHANGED
|
@@ -17,7 +17,7 @@ function RootSemrush({
|
|
|
17
17
|
height: height,
|
|
18
18
|
viewBox: viewBox
|
|
19
19
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
20
|
-
d: "
|
|
20
|
+
d: "M11.077 3.002C13.786 3.002 16 5.279 16 8s-2.132 4.93-4.8 4.999H4.161l4.256-2.308H0l7.646-4.144H3.438l5.136-2.78C9.496 3.28 10.321 3 11.077 3z",
|
|
21
21
|
shapeRendering: "geometricPrecision"
|
|
22
22
|
}));
|
|
23
23
|
}
|
package/lib/cjs/Icon.js
CHANGED
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _core = require("@semcore/core");
|
|
10
|
+
var _indentStyles = require("@semcore/core/lib/utils/indentStyles");
|
|
10
11
|
var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/propsForElement"));
|
|
11
12
|
var _useColorResolver = require("@semcore/core/lib/utils/use/useColorResolver");
|
|
12
13
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -17,11 +18,28 @@ const styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_sta
|
|
|
17
18
|
"__SIcon": "___SIcon_wbaoh_gg_",
|
|
18
19
|
"--color": "--color_wbaoh"
|
|
19
20
|
});
|
|
21
|
+
function calculateIndentStyles(props, scaleIndent) {
|
|
22
|
+
return (0, _indentStyles.removeUndefinedKeys)({
|
|
23
|
+
margin: (0, _indentStyles.getAutoOrScaleIndent)(props['m'], scaleIndent),
|
|
24
|
+
marginTop: (0, _indentStyles.getAutoOrScaleIndent)(props['mt'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
|
|
25
|
+
marginBottom: (0, _indentStyles.getAutoOrScaleIndent)(props['mb'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
|
|
26
|
+
marginLeft: (0, _indentStyles.getAutoOrScaleIndent)(props['ml'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent),
|
|
27
|
+
marginRight: (0, _indentStyles.getAutoOrScaleIndent)(props['mr'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent)
|
|
28
|
+
});
|
|
29
|
+
}
|
|
20
30
|
function Icon({
|
|
21
31
|
width = 16,
|
|
22
32
|
height = 16,
|
|
23
33
|
viewBox = '0 0 16 16',
|
|
24
34
|
color: colorProps,
|
|
35
|
+
scaleIndent = 4,
|
|
36
|
+
m,
|
|
37
|
+
mt,
|
|
38
|
+
mb,
|
|
39
|
+
my,
|
|
40
|
+
ml,
|
|
41
|
+
mr,
|
|
42
|
+
mx,
|
|
25
43
|
...props
|
|
26
44
|
}, ref) {
|
|
27
45
|
const SIcon = 'svg';
|
|
@@ -34,13 +52,24 @@ function Icon({
|
|
|
34
52
|
} = sstyles.cn('SIcon', {
|
|
35
53
|
'use:color': color
|
|
36
54
|
});
|
|
55
|
+
const indentStyles = _react.default.useMemo(() => {
|
|
56
|
+
return calculateIndentStyles({
|
|
57
|
+
m,
|
|
58
|
+
mt,
|
|
59
|
+
mb,
|
|
60
|
+
my,
|
|
61
|
+
ml,
|
|
62
|
+
mr,
|
|
63
|
+
mx
|
|
64
|
+
}, scaleIndent);
|
|
65
|
+
}, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
|
|
37
66
|
return /*#__PURE__*/_react.default.createElement(SIcon, (0, _extends2.default)({
|
|
38
67
|
width: width,
|
|
39
68
|
height: height,
|
|
40
69
|
viewBox: viewBox,
|
|
41
70
|
"aria-hidden": "true"
|
|
42
71
|
}, (0, _propsForElement.default)(props), {
|
|
43
|
-
style: Object.assign({}, style, props.style),
|
|
72
|
+
style: Object.assign({}, style, props.style, indentStyles),
|
|
44
73
|
className: `${className} ${props.className ?? ''}`,
|
|
45
74
|
ref: ref
|
|
46
75
|
}));
|
package/lib/cjs/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["_core","require","_propsForElement","_interopRequireDefault","_useColorResolver","_react","styles","sstyled","insert","Icon","width","height","viewBox","color","colorProps","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["_core","require","_indentStyles","_propsForElement","_interopRequireDefault","_useColorResolver","_react","styles","sstyled","insert","calculateIndentStyles","props","scaleIndent","removeUndefinedKeys","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","Icon","width","height","viewBox","color","colorProps","m","mt","mb","my","ml","mr","mx","ref","SIcon","resolveColor","useColorResolver","sstyles","className","style","cn","indentStyles","React","useMemo","default","createElement","_extends2","propsForElement","Object","assign","_default","exports","createBaseComponent"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n /**\n * Icon width\n * @internal\n */\n width?: string | number;\n /**\n * Icon height\n * @internal\n */\n height?: string | number;\n /**\n * SVG viewBox attribute\n * @internal\n */\n viewBox?: string;\n /** Icon color */\n color?: string;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n return removeUndefinedKeys({\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n });\n}\n\nfunction Icon({\n width = 16,\n height = 16,\n viewBox = '0 0 16 16',\n color: colorProps,\n scaleIndent = 4,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n const SIcon = 'svg';\n\n const resolveColor = useColorResolver();\n const color = resolveColor(colorProps);\n\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'use:color': color,\n });\n\n const indentStyles: React.CSSProperties = React.useMemo(() => {\n return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n }, [\n scaleIndent,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ]);\n\n return (\n <SIcon\n width={width}\n height={height}\n viewBox={viewBox}\n aria-hidden='true'\n {...propsForElement(props)}\n style={Object.assign({}, style, props.style, indentStyles)}\n className={`${className} ${props.className ?? ''}`}\n ref={ref}\n />\n );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/Icon.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
3
3
|
import { createBaseComponent, sstyled } from '@semcore/core';
|
|
4
|
+
import { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';
|
|
4
5
|
import propsForElement from '@semcore/core/lib/utils/propsForElement';
|
|
5
6
|
import { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';
|
|
6
7
|
import React from 'react';
|
|
@@ -11,11 +12,28 @@ const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*
|
|
|
11
12
|
"__SIcon": "___SIcon_wbaoh_gg_",
|
|
12
13
|
"--color": "--color_wbaoh"
|
|
13
14
|
});
|
|
15
|
+
function calculateIndentStyles(props, scaleIndent) {
|
|
16
|
+
return removeUndefinedKeys({
|
|
17
|
+
margin: getAutoOrScaleIndent(props['m'], scaleIndent),
|
|
18
|
+
marginTop: getAutoOrScaleIndent(props['mt'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
|
|
19
|
+
marginBottom: getAutoOrScaleIndent(props['mb'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
|
|
20
|
+
marginLeft: getAutoOrScaleIndent(props['ml'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent),
|
|
21
|
+
marginRight: getAutoOrScaleIndent(props['mr'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent)
|
|
22
|
+
});
|
|
23
|
+
}
|
|
14
24
|
function Icon({
|
|
15
25
|
width = 16,
|
|
16
26
|
height = 16,
|
|
17
27
|
viewBox = '0 0 16 16',
|
|
18
28
|
color: colorProps,
|
|
29
|
+
scaleIndent = 4,
|
|
30
|
+
m,
|
|
31
|
+
mt,
|
|
32
|
+
mb,
|
|
33
|
+
my,
|
|
34
|
+
ml,
|
|
35
|
+
mr,
|
|
36
|
+
mx,
|
|
19
37
|
...props
|
|
20
38
|
}, ref) {
|
|
21
39
|
const SIcon = 'svg';
|
|
@@ -28,13 +46,24 @@ function Icon({
|
|
|
28
46
|
} = sstyles.cn('SIcon', {
|
|
29
47
|
'use:color': color
|
|
30
48
|
});
|
|
49
|
+
const indentStyles = React.useMemo(() => {
|
|
50
|
+
return calculateIndentStyles({
|
|
51
|
+
m,
|
|
52
|
+
mt,
|
|
53
|
+
mb,
|
|
54
|
+
my,
|
|
55
|
+
ml,
|
|
56
|
+
mr,
|
|
57
|
+
mx
|
|
58
|
+
}, scaleIndent);
|
|
59
|
+
}, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
|
|
31
60
|
return /*#__PURE__*/React.createElement(SIcon, _extends({
|
|
32
61
|
width: width,
|
|
33
62
|
height: height,
|
|
34
63
|
viewBox: viewBox,
|
|
35
64
|
"aria-hidden": "true"
|
|
36
65
|
}, propsForElement(props), {
|
|
37
|
-
style: Object.assign({}, style, props.style),
|
|
66
|
+
style: Object.assign({}, style, props.style, indentStyles),
|
|
38
67
|
className: `${className} ${props.className ?? ''}`,
|
|
39
68
|
ref: ref
|
|
40
69
|
}));
|
package/lib/es6/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["createBaseComponent","sstyled","propsForElement","useColorResolver","React","styles","_sstyled","insert","Icon","width","height","viewBox","color","colorProps","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["createBaseComponent","sstyled","removeUndefinedKeys","getAutoOrScaleIndent","propsForElement","useColorResolver","React","styles","_sstyled","insert","calculateIndentStyles","props","scaleIndent","margin","marginTop","marginBottom","marginLeft","marginRight","Icon","width","height","viewBox","color","colorProps","m","mt","mb","my","ml","mr","mx","ref","SIcon","resolveColor","sstyles","className","style","cn","indentStyles","useMemo","createElement","_extends","Object","assign"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n /**\n * Icon width\n * @internal\n */\n width?: string | number;\n /**\n * Icon height\n * @internal\n */\n height?: string | number;\n /**\n * SVG viewBox attribute\n * @internal\n */\n viewBox?: string;\n /** Icon color */\n color?: string;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n return removeUndefinedKeys({\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n });\n}\n\nfunction Icon({\n width = 16,\n height = 16,\n viewBox = '0 0 16 16',\n color: colorProps,\n scaleIndent = 4,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n const SIcon = 'svg';\n\n const resolveColor = useColorResolver();\n const color = resolveColor(colorProps);\n\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'use:color': color,\n });\n\n const indentStyles: React.CSSProperties = React.useMemo(() => {\n return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n }, [\n scaleIndent,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ]);\n\n return (\n <SIcon\n width={width}\n height={height}\n viewBox={viewBox}\n aria-hidden='true'\n {...propsForElement(props)}\n style={Object.assign({}, style, props.style, indentStyles)}\n className={`${className} ${props.className ?? ''}`}\n ref={ref}\n />\n );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":";;AAAA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ,eAAe;AAC5D,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,sCAAsC;AAChG,OAAOC,eAAe,MAAM,yCAAyC;AACrE,SAASC,gBAAgB,QAAQ,8CAA8C;AAC/E,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAmD1B,SAASC,qBAAqBA,CAACC,KAAgB,EAAEC,WAAmB,EAAE;EACpE,OAAOV,mBAAmB,CAAC;IACzBW,MAAM,EAAEV,oBAAoB,CAACQ,KAAK,CAAC,GAAG,CAAC,EAAEC,WAAW,CAAC;IACrDE,SAAS,EACPX,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW,CAAC,IAC9CT,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW,CAAC;IAChDG,YAAY,EACVZ,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW,CAAC,IAC9CT,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW,CAAC;IAChDI,UAAU,EACRb,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW,CAAC,IAC9CT,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW,CAAC;IAChDK,WAAW,EACTd,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW,CAAC,IAC9CT,oBAAoB,CAACQ,KAAK,CAAC,IAAI,CAAC,EAAEC,WAAW;EACjD,CAAC,CAAC;AACJ;AAEA,SAASM,IAAIA,CAAC;EACZC,KAAK,GAAG,EAAE;EACVC,MAAM,GAAG,EAAE;EACXC,OAAO,GAAG,WAAW;EACrBC,KAAK,EAAEC,UAAU;EACjBX,WAAW,GAAG,CAAC;EACfY,CAAC;EACDC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACF,GAAGnB;AACsC,CAAC,EAAEoB,GAAsC,EAAE;EACpF,MAAMC,KAAK,GAAG,KAAK;EAEnB,MAAMC,YAAY,GAAG5B,gBAAgB,CAAC,CAAC;EACvC,MAAMiB,KAAK,GAAGW,YAAY,CAACV,UAAU,CAAC;EAEtC,MAAMW,OAAO,GAAGjC,OAAO,CAACM,MAAM,CAAC;EAC/B,MAAM;IAAE4B,SAAS;IAAEC;EAAM,CAAC,GAAGF,OAAO,CAACG,EAAE,CAAC,OAAO,EAAE;IAC/C,WAAW,EAAEf;EACf,CAAC,CAAC;EAEF,MAAMgB,YAAiC,GAAGhC,KAAK,CAACiC,OAAO,CAAC,MAAM;IAC5D,OAAO7B,qBAAqB,CAAC;MAAEc,CAAC;MAAEC,EAAE;MAAEC,EAAE;MAAEC,EAAE;MAAEC,EAAE;MAAEC,EAAE;MAAEC;IAAG,CAAC,EAAElB,WAAW,CAAC;EAC1E,CAAC,EAAE,CACDA,WAAW,EACXY,CAAC,EACDC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,CACH,CAAC;EAEF,oBACExB,KAAA,CAAAkC,aAAA,CAACR,KAAK,EAAAS,QAAA;IACJtB,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjB,eAAY;EAAM,GACdjB,eAAe,CAACO,KAAK,CAAC;IAC1ByB,KAAK,EAAEM,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEP,KAAK,EAAEzB,KAAK,CAACyB,KAAK,EAAEE,YAAY,CAAE;IAC3DH,SAAS,EAAE,GAAGA,SAAS,IAAIxB,KAAK,CAACwB,SAAS,IAAI,EAAE,EAAG;IACnDJ,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN;AAEA,eAAe/B,mBAAmB,CAAmBkB,IAAI,CAAC","ignoreList":[]}
|
package/lib/esm/Icon.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import {
|
|
2
|
+
import { sstyled, createBaseComponent } from "@semcore/core";
|
|
3
|
+
import { removeUndefinedKeys, getAutoOrScaleIndent } from "@semcore/core/lib/utils/indentStyles";
|
|
3
4
|
import propsForElement from "@semcore/core/lib/utils/propsForElement";
|
|
4
5
|
import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
|
|
5
6
|
import React from "react";
|
|
6
|
-
/*!__reshadow-styles__:"./style/icon.shadow.css"*/
|
|
7
7
|
const styles = (
|
|
8
8
|
/*__reshadow_css_start__*/
|
|
9
9
|
(sstyled.insert(
|
|
@@ -17,11 +17,28 @@ const styles = (
|
|
|
17
17
|
"--color": "--color_wbaoh"
|
|
18
18
|
})
|
|
19
19
|
);
|
|
20
|
+
function calculateIndentStyles(props, scaleIndent) {
|
|
21
|
+
return removeUndefinedKeys({
|
|
22
|
+
margin: getAutoOrScaleIndent(props["m"], scaleIndent),
|
|
23
|
+
marginTop: getAutoOrScaleIndent(props["mt"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
|
|
24
|
+
marginBottom: getAutoOrScaleIndent(props["mb"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
|
|
25
|
+
marginLeft: getAutoOrScaleIndent(props["ml"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent),
|
|
26
|
+
marginRight: getAutoOrScaleIndent(props["mr"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent)
|
|
27
|
+
});
|
|
28
|
+
}
|
|
20
29
|
function Icon({
|
|
21
30
|
width = 16,
|
|
22
31
|
height = 16,
|
|
23
32
|
viewBox = "0 0 16 16",
|
|
24
33
|
color: colorProps,
|
|
34
|
+
scaleIndent = 4,
|
|
35
|
+
m,
|
|
36
|
+
mt,
|
|
37
|
+
mb,
|
|
38
|
+
my,
|
|
39
|
+
ml,
|
|
40
|
+
mr,
|
|
41
|
+
mx,
|
|
25
42
|
...props
|
|
26
43
|
}, ref) {
|
|
27
44
|
const SIcon = "svg";
|
|
@@ -34,13 +51,24 @@ function Icon({
|
|
|
34
51
|
} = sstyles.cn("SIcon", {
|
|
35
52
|
"use:color": color
|
|
36
53
|
});
|
|
54
|
+
const indentStyles = React.useMemo(() => {
|
|
55
|
+
return calculateIndentStyles({
|
|
56
|
+
m,
|
|
57
|
+
mt,
|
|
58
|
+
mb,
|
|
59
|
+
my,
|
|
60
|
+
ml,
|
|
61
|
+
mr,
|
|
62
|
+
mx
|
|
63
|
+
}, scaleIndent);
|
|
64
|
+
}, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
|
|
37
65
|
return /* @__PURE__ */ React.createElement(SIcon, _extends({
|
|
38
66
|
width,
|
|
39
67
|
height,
|
|
40
68
|
viewBox,
|
|
41
69
|
"aria-hidden": "true"
|
|
42
70
|
}, propsForElement(props), {
|
|
43
|
-
style: Object.assign({}, style, props.style),
|
|
71
|
+
style: Object.assign({}, style, props.style, indentStyles),
|
|
44
72
|
className: `${className} ${props.className ?? ""}`,
|
|
45
73
|
ref
|
|
46
74
|
}));
|
package/lib/types/Icon.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
export type IconProps = React.SVGProps<SVGSVGElement> & {
|
|
1
|
+
export type IconProps = {
|
|
3
2
|
/**
|
|
4
3
|
* Icon width
|
|
5
4
|
* @internal
|
|
@@ -17,6 +16,25 @@ export type IconProps = React.SVGProps<SVGSVGElement> & {
|
|
|
17
16
|
viewBox?: string;
|
|
18
17
|
/** Icon color */
|
|
19
18
|
color?: string;
|
|
19
|
+
/** CSS `margin` property */
|
|
20
|
+
m?: number | string;
|
|
21
|
+
/** CSS `margin-top` property */
|
|
22
|
+
mt?: number | string;
|
|
23
|
+
/** CSS `margin-right` property */
|
|
24
|
+
mr?: number | string;
|
|
25
|
+
/** CSS `margin-bottom` property */
|
|
26
|
+
mb?: number | string;
|
|
27
|
+
/** CSS `margin-left` property */
|
|
28
|
+
ml?: number | string;
|
|
29
|
+
/** CSS `margin-left` and `margin-right` property */
|
|
30
|
+
mx?: number | string;
|
|
31
|
+
/** CSS `margin-top` and `margin-bottom` property */
|
|
32
|
+
my?: number | string;
|
|
33
|
+
/**
|
|
34
|
+
* Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).
|
|
35
|
+
* @default 4
|
|
36
|
+
*/
|
|
37
|
+
scaleIndent?: number;
|
|
20
38
|
};
|
|
21
39
|
declare const _default: import("@semcore/core").Intergalactic.Component<"svg", IconProps, {}, never[]>;
|
|
22
40
|
export default _default;
|