@semcore/icon 3.15.2 → 3.16.0
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 +16 -0
- package/FeauturedImage/l/index.js +1 -1
- package/FeauturedImage/l/index.mjs +1 -1
- package/FeauturedImage/m/index.js +1 -1
- package/FeauturedImage/m/index.mjs +1 -1
- package/FeauturedVideo/l/index.js +1 -1
- package/FeauturedVideo/l/index.mjs +1 -1
- package/FeauturedVideo/m/index.js +1 -1
- package/FeauturedVideo/m/index.mjs +1 -1
- package/Stoller/l/index.js +1 -1
- package/Stoller/l/index.mjs +1 -1
- package/Stoller/m/index.js +1 -1
- package/Stoller/m/index.mjs +1 -1
- package/color/GoogleSheets/l/index.d.ts +6 -0
- package/color/GoogleSheets/l/index.js +47 -0
- package/color/GoogleSheets/l/index.mjs +35 -0
- package/color/GoogleSheets/m/index.d.ts +6 -0
- package/color/GoogleSheets/m/index.js +47 -0
- package/color/GoogleSheets/m/index.mjs +35 -0
- package/color/GoogleSlides/l/index.d.ts +6 -0
- package/color/GoogleSlides/l/index.js +47 -0
- package/color/GoogleSlides/l/index.mjs +35 -0
- package/color/GoogleSlides/m/index.d.ts +6 -0
- package/color/GoogleSlides/m/index.js +47 -0
- package/color/GoogleSlides/m/index.mjs +35 -0
- package/color/YoutubeAlt/l/index.js +1 -1
- package/color/YoutubeAlt/l/index.mjs +1 -1
- package/color/YoutubeAlt/m/index.js +1 -1
- package/color/YoutubeAlt/m/index.mjs +1 -1
- package/color/YoutubeRed/l/index.js +1 -1
- package/color/YoutubeRed/l/index.mjs +1 -1
- package/color/YoutubeRed/m/index.js +1 -1
- package/color/YoutubeRed/m/index.mjs +1 -1
- package/lib/cjs/Icon.js +14 -13
- package/lib/cjs/Icon.js.map +1 -1
- package/lib/es6/Icon.js +14 -13
- package/lib/es6/Icon.js.map +1 -1
- package/package.json +2 -6
- package/svg-new/color/GoogleSheets/l.svg +5 -0
- package/svg-new/color/GoogleSheets/m.svg +5 -0
- package/svg-new/color/GoogleSlides/l.svg +5 -0
- package/svg-new/color/GoogleSlides/m.svg +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.16.0] - 2023-06-27
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Added new `GoogleSheets` and `GoogleSlides` icons.
|
|
10
|
+
|
|
11
|
+
### Fixed
|
|
12
|
+
|
|
13
|
+
- Removed duplication custom css class.
|
|
14
|
+
|
|
15
|
+
## [3.15.3] - 2023-06-27
|
|
16
|
+
|
|
17
|
+
### Changed
|
|
18
|
+
|
|
19
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.7.31 ~> 4.7.32], `@semcore/utils` [3.53.4 ~> 3.54.0]).
|
|
20
|
+
|
|
5
21
|
## [3.15.2] - 2023-06-14
|
|
6
22
|
|
|
7
23
|
### Changed
|
|
@@ -49,7 +49,7 @@ FeauturedImage.displayName = 'FeauturedImage';
|
|
|
49
49
|
|
|
50
50
|
var _default = (0, _core.createBaseComponent)(FeauturedImage);
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
console.warn(true, 'The "FeauturedImage" icon is deprecated. Use the "FeaturedImage"', 'Icon');
|
|
54
54
|
|
|
55
55
|
exports["default"] = _default;
|
|
@@ -49,7 +49,7 @@ FeauturedImage.displayName = 'FeauturedImage';
|
|
|
49
49
|
|
|
50
50
|
var _default = (0, _core.createBaseComponent)(FeauturedImage);
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
console.warn(true, 'The "FeauturedImage" icon is deprecated. Use the "FeaturedImage"', 'Icon');
|
|
54
54
|
|
|
55
55
|
exports["default"] = _default;
|
|
@@ -49,7 +49,7 @@ FeauturedVideo.displayName = 'FeauturedVideo';
|
|
|
49
49
|
|
|
50
50
|
var _default = (0, _core.createBaseComponent)(FeauturedVideo);
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
console.warn(true, 'The "FeauturedVideo" icon is deprecated. Use the "FeaturedVideo"', 'Icon');
|
|
54
54
|
|
|
55
55
|
exports["default"] = _default;
|
|
@@ -49,7 +49,7 @@ FeauturedVideo.displayName = 'FeauturedVideo';
|
|
|
49
49
|
|
|
50
50
|
var _default = (0, _core.createBaseComponent)(FeauturedVideo);
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
console.warn(true, 'The "FeauturedVideo" icon is deprecated. Use the "FeaturedVideo"', 'Icon');
|
|
54
54
|
|
|
55
55
|
exports["default"] = _default;
|
package/Stoller/l/index.js
CHANGED
|
@@ -55,7 +55,7 @@ Stoller.displayName = 'Stoller';
|
|
|
55
55
|
|
|
56
56
|
var _default = (0, _core.createBaseComponent)(Stoller);
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
|
|
59
59
|
console.warn(true, 'The "Stoller" icon is deprecated. Use the "Stroller"', 'Icon');
|
|
60
60
|
|
|
61
61
|
exports['default'] = _default;
|
package/Stoller/l/index.mjs
CHANGED
|
@@ -42,7 +42,7 @@ function Stoller({ width = '24', height = '24', viewBox = '0 0 24 24', ...props
|
|
|
42
42
|
);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
|
|
46
46
|
console.warn(true, 'The "Stoller" icon is deprecated. Use the "Stroller"', 'Icon');
|
|
47
47
|
|
|
48
48
|
Stoller.displayName = 'Stoller';
|
package/Stoller/m/index.js
CHANGED
|
@@ -59,7 +59,7 @@ Stoller.displayName = 'Stoller';
|
|
|
59
59
|
|
|
60
60
|
var _default = (0, _core.createBaseComponent)(Stoller);
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
|
|
63
63
|
console.warn(true, 'The "Stoller" icon is deprecated. Use the "Stroller"', 'Icon');
|
|
64
64
|
|
|
65
65
|
exports['default'] = _default;
|
package/Stoller/m/index.mjs
CHANGED
|
@@ -48,7 +48,7 @@ function Stoller({ width = '16', height = '16', viewBox = '0 0 16 16', ...props
|
|
|
48
48
|
|
|
49
49
|
Stoller.displayName = 'Stoller';
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
|
|
52
52
|
console.warn(true, 'The "Stoller" icon is deprecated. Use the "Stroller"', 'Icon');
|
|
53
53
|
|
|
54
54
|
export default createBaseComponent(Stoller);
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _core = require("@semcore/core");
|
|
12
|
+
var _icon = _interopRequireDefault(require("@semcore/icon"));
|
|
13
|
+
var _excluded = ["width", "height", "viewBox"];
|
|
14
|
+
function GoogleSheets(_ref, ref) {
|
|
15
|
+
var _ref$width = _ref.width,
|
|
16
|
+
width = _ref$width === void 0 ? '24' : _ref$width,
|
|
17
|
+
_ref$height = _ref.height,
|
|
18
|
+
height = _ref$height === void 0 ? '24' : _ref$height,
|
|
19
|
+
_ref$viewBox = _ref.viewBox,
|
|
20
|
+
viewBox = _ref$viewBox === void 0 ? '0 0 24 24' : _ref$viewBox,
|
|
21
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
22
|
+
return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
|
|
23
|
+
ref: ref,
|
|
24
|
+
"data-name": "GoogleSheets",
|
|
25
|
+
"data-group": "l",
|
|
26
|
+
width: width,
|
|
27
|
+
height: height,
|
|
28
|
+
viewBox: viewBox
|
|
29
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
|
30
|
+
fill: "#4D9D68",
|
|
31
|
+
d: "M3 2c0-1.105.93-2 2.077-2H15l6 6v16c0 1.105-.93 2-2.077 2H5.077C3.93 24 3 23.105 3 22V2Z",
|
|
32
|
+
shapeRendering: "geometricPrecision"
|
|
33
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
34
|
+
fill: "#fff",
|
|
35
|
+
fillRule: "evenodd",
|
|
36
|
+
d: "M12.5 10H16v2h-3.5v-2Zm0 3H16v2h-3.5v-2Zm-1 2v-2H8v2h3.5ZM8 16v2h3.5v-2H8Zm4.5 0H16v2h-3.5v-2Zm-1-6v2H8v-2h3.5Zm0-1H17v10H7V9h4.5Z",
|
|
37
|
+
clipRule: "evenodd",
|
|
38
|
+
shapeRendering: "geometricPrecision"
|
|
39
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
40
|
+
fill: "#98C8AD",
|
|
41
|
+
d: "m21 6-6-6v6h6Z",
|
|
42
|
+
shapeRendering: "geometricPrecision"
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
GoogleSheets.displayName = 'GoogleSheets';
|
|
46
|
+
var _default = (0, _core.createBaseComponent)(GoogleSheets);
|
|
47
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { createBaseComponent } from '@semcore/core';
|
|
4
|
+
import Icon from '@semcore/icon';
|
|
5
|
+
function GoogleSheets({
|
|
6
|
+
width = '24',
|
|
7
|
+
height = '24',
|
|
8
|
+
viewBox = '0 0 24 24',
|
|
9
|
+
...props
|
|
10
|
+
}, ref) {
|
|
11
|
+
return /*#__PURE__*/React.createElement(Icon, _extends({
|
|
12
|
+
ref: ref,
|
|
13
|
+
"data-name": "GoogleSheets",
|
|
14
|
+
"data-group": "l",
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
17
|
+
viewBox: viewBox
|
|
18
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
fill: "#4D9D68",
|
|
20
|
+
d: "M3 2c0-1.105.93-2 2.077-2H15l6 6v16c0 1.105-.93 2-2.077 2H5.077C3.93 24 3 23.105 3 22V2Z",
|
|
21
|
+
shapeRendering: "geometricPrecision"
|
|
22
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
23
|
+
fill: "#fff",
|
|
24
|
+
fillRule: "evenodd",
|
|
25
|
+
d: "M12.5 10H16v2h-3.5v-2Zm0 3H16v2h-3.5v-2Zm-1 2v-2H8v2h3.5ZM8 16v2h3.5v-2H8Zm4.5 0H16v2h-3.5v-2Zm-1-6v2H8v-2h3.5Zm0-1H17v10H7V9h4.5Z",
|
|
26
|
+
clipRule: "evenodd",
|
|
27
|
+
shapeRendering: "geometricPrecision"
|
|
28
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
29
|
+
fill: "#98C8AD",
|
|
30
|
+
d: "m21 6-6-6v6h6Z",
|
|
31
|
+
shapeRendering: "geometricPrecision"
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
GoogleSheets.displayName = 'GoogleSheets';
|
|
35
|
+
export default createBaseComponent(GoogleSheets);
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _core = require("@semcore/core");
|
|
12
|
+
var _icon = _interopRequireDefault(require("@semcore/icon"));
|
|
13
|
+
var _excluded = ["width", "height", "viewBox"];
|
|
14
|
+
function GoogleSheets(_ref, ref) {
|
|
15
|
+
var _ref$width = _ref.width,
|
|
16
|
+
width = _ref$width === void 0 ? '16' : _ref$width,
|
|
17
|
+
_ref$height = _ref.height,
|
|
18
|
+
height = _ref$height === void 0 ? '16' : _ref$height,
|
|
19
|
+
_ref$viewBox = _ref.viewBox,
|
|
20
|
+
viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
|
|
21
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
22
|
+
return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
|
|
23
|
+
ref: ref,
|
|
24
|
+
"data-name": "GoogleSheets",
|
|
25
|
+
"data-group": "m",
|
|
26
|
+
width: width,
|
|
27
|
+
height: height,
|
|
28
|
+
viewBox: viewBox
|
|
29
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
|
30
|
+
fill: "#4D9D68",
|
|
31
|
+
d: "M2 1.333C2 .597 2.62 0 3.385 0H10l4 4v10.667c0 .736-.62 1.333-1.385 1.333h-9.23C2.62 16 2 15.403 2 14.667V1.333Z",
|
|
32
|
+
shapeRendering: "geometricPrecision"
|
|
33
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
34
|
+
fill: "#fff",
|
|
35
|
+
fillRule: "evenodd",
|
|
36
|
+
d: "M8.5 7H11v1H8.5V7Zm0 2H11v1H8.5V9Zm-1 1V9H5v1h2.5ZM5 11v1h2.5v-1H5Zm3.5 0H11v1H8.5v-1Zm-1-4v1H5V7h2.5Zm0 6H4V6h8v7H7.5Z",
|
|
37
|
+
clipRule: "evenodd",
|
|
38
|
+
shapeRendering: "geometricPrecision"
|
|
39
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
40
|
+
fill: "#98C8AD",
|
|
41
|
+
d: "m14 4-4-4v4h4Z",
|
|
42
|
+
shapeRendering: "geometricPrecision"
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
GoogleSheets.displayName = 'GoogleSheets';
|
|
46
|
+
var _default = (0, _core.createBaseComponent)(GoogleSheets);
|
|
47
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { createBaseComponent } from '@semcore/core';
|
|
4
|
+
import Icon from '@semcore/icon';
|
|
5
|
+
function GoogleSheets({
|
|
6
|
+
width = '16',
|
|
7
|
+
height = '16',
|
|
8
|
+
viewBox = '0 0 16 16',
|
|
9
|
+
...props
|
|
10
|
+
}, ref) {
|
|
11
|
+
return /*#__PURE__*/React.createElement(Icon, _extends({
|
|
12
|
+
ref: ref,
|
|
13
|
+
"data-name": "GoogleSheets",
|
|
14
|
+
"data-group": "m",
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
17
|
+
viewBox: viewBox
|
|
18
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
fill: "#4D9D68",
|
|
20
|
+
d: "M2 1.333C2 .597 2.62 0 3.385 0H10l4 4v10.667c0 .736-.62 1.333-1.385 1.333h-9.23C2.62 16 2 15.403 2 14.667V1.333Z",
|
|
21
|
+
shapeRendering: "geometricPrecision"
|
|
22
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
23
|
+
fill: "#fff",
|
|
24
|
+
fillRule: "evenodd",
|
|
25
|
+
d: "M8.5 7H11v1H8.5V7Zm0 2H11v1H8.5V9Zm-1 1V9H5v1h2.5ZM5 11v1h2.5v-1H5Zm3.5 0H11v1H8.5v-1Zm-1-4v1H5V7h2.5Zm0 6H4V6h8v7H7.5Z",
|
|
26
|
+
clipRule: "evenodd",
|
|
27
|
+
shapeRendering: "geometricPrecision"
|
|
28
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
29
|
+
fill: "#98C8AD",
|
|
30
|
+
d: "m14 4-4-4v4h4Z",
|
|
31
|
+
shapeRendering: "geometricPrecision"
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
GoogleSheets.displayName = 'GoogleSheets';
|
|
35
|
+
export default createBaseComponent(GoogleSheets);
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _core = require("@semcore/core");
|
|
12
|
+
var _icon = _interopRequireDefault(require("@semcore/icon"));
|
|
13
|
+
var _excluded = ["width", "height", "viewBox"];
|
|
14
|
+
function GoogleSlides(_ref, ref) {
|
|
15
|
+
var _ref$width = _ref.width,
|
|
16
|
+
width = _ref$width === void 0 ? '24' : _ref$width,
|
|
17
|
+
_ref$height = _ref.height,
|
|
18
|
+
height = _ref$height === void 0 ? '24' : _ref$height,
|
|
19
|
+
_ref$viewBox = _ref.viewBox,
|
|
20
|
+
viewBox = _ref$viewBox === void 0 ? '0 0 24 24' : _ref$viewBox,
|
|
21
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
22
|
+
return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
|
|
23
|
+
ref: ref,
|
|
24
|
+
"data-name": "GoogleSlides",
|
|
25
|
+
"data-group": "l",
|
|
26
|
+
width: width,
|
|
27
|
+
height: height,
|
|
28
|
+
viewBox: viewBox
|
|
29
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
|
30
|
+
fill: "#E6B542",
|
|
31
|
+
d: "M3 2c0-1.105.93-2 2.077-2H15l6 6v16c0 1.105-.93 2-2.077 2H5.077C3.93 24 3 23.105 3 22V2Z",
|
|
32
|
+
shapeRendering: "geometricPrecision"
|
|
33
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
34
|
+
fill: "#fff",
|
|
35
|
+
fillRule: "evenodd",
|
|
36
|
+
d: "M8 9a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1H8Zm8 3H8v4h8v-4Z",
|
|
37
|
+
clipRule: "evenodd",
|
|
38
|
+
shapeRendering: "geometricPrecision"
|
|
39
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
40
|
+
fill: "#EED58D",
|
|
41
|
+
d: "m21 6-6-6v6h6Z",
|
|
42
|
+
shapeRendering: "geometricPrecision"
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
GoogleSlides.displayName = 'GoogleSlides';
|
|
46
|
+
var _default = (0, _core.createBaseComponent)(GoogleSlides);
|
|
47
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { createBaseComponent } from '@semcore/core';
|
|
4
|
+
import Icon from '@semcore/icon';
|
|
5
|
+
function GoogleSlides({
|
|
6
|
+
width = '24',
|
|
7
|
+
height = '24',
|
|
8
|
+
viewBox = '0 0 24 24',
|
|
9
|
+
...props
|
|
10
|
+
}, ref) {
|
|
11
|
+
return /*#__PURE__*/React.createElement(Icon, _extends({
|
|
12
|
+
ref: ref,
|
|
13
|
+
"data-name": "GoogleSlides",
|
|
14
|
+
"data-group": "l",
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
17
|
+
viewBox: viewBox
|
|
18
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
fill: "#E6B542",
|
|
20
|
+
d: "M3 2c0-1.105.93-2 2.077-2H15l6 6v16c0 1.105-.93 2-2.077 2H5.077C3.93 24 3 23.105 3 22V2Z",
|
|
21
|
+
shapeRendering: "geometricPrecision"
|
|
22
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
23
|
+
fill: "#fff",
|
|
24
|
+
fillRule: "evenodd",
|
|
25
|
+
d: "M8 9a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1H8Zm8 3H8v4h8v-4Z",
|
|
26
|
+
clipRule: "evenodd",
|
|
27
|
+
shapeRendering: "geometricPrecision"
|
|
28
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
29
|
+
fill: "#EED58D",
|
|
30
|
+
d: "m21 6-6-6v6h6Z",
|
|
31
|
+
shapeRendering: "geometricPrecision"
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
GoogleSlides.displayName = 'GoogleSlides';
|
|
35
|
+
export default createBaseComponent(GoogleSlides);
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _core = require("@semcore/core");
|
|
12
|
+
var _icon = _interopRequireDefault(require("@semcore/icon"));
|
|
13
|
+
var _excluded = ["width", "height", "viewBox"];
|
|
14
|
+
function GoogleSlides(_ref, ref) {
|
|
15
|
+
var _ref$width = _ref.width,
|
|
16
|
+
width = _ref$width === void 0 ? '16' : _ref$width,
|
|
17
|
+
_ref$height = _ref.height,
|
|
18
|
+
height = _ref$height === void 0 ? '16' : _ref$height,
|
|
19
|
+
_ref$viewBox = _ref.viewBox,
|
|
20
|
+
viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
|
|
21
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
22
|
+
return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
|
|
23
|
+
ref: ref,
|
|
24
|
+
"data-name": "GoogleSlides",
|
|
25
|
+
"data-group": "m",
|
|
26
|
+
width: width,
|
|
27
|
+
height: height,
|
|
28
|
+
viewBox: viewBox
|
|
29
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
|
30
|
+
fill: "#E6B542",
|
|
31
|
+
d: "M2 1.333C2 .597 2.62 0 3.385 0H10l4 4v10.667c0 .736-.62 1.333-1.385 1.333h-9.23C2.62 16 2 15.403 2 14.667V1.333Z",
|
|
32
|
+
shapeRendering: "geometricPrecision"
|
|
33
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
34
|
+
fill: "#fff",
|
|
35
|
+
fillRule: "evenodd",
|
|
36
|
+
d: "M5 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5Zm6 2.5H5v3h6v-3Z",
|
|
37
|
+
clipRule: "evenodd",
|
|
38
|
+
shapeRendering: "geometricPrecision"
|
|
39
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
40
|
+
fill: "#EED58D",
|
|
41
|
+
d: "m14 4-4-4v4h4Z",
|
|
42
|
+
shapeRendering: "geometricPrecision"
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
GoogleSlides.displayName = 'GoogleSlides';
|
|
46
|
+
var _default = (0, _core.createBaseComponent)(GoogleSlides);
|
|
47
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { createBaseComponent } from '@semcore/core';
|
|
4
|
+
import Icon from '@semcore/icon';
|
|
5
|
+
function GoogleSlides({
|
|
6
|
+
width = '16',
|
|
7
|
+
height = '16',
|
|
8
|
+
viewBox = '0 0 16 16',
|
|
9
|
+
...props
|
|
10
|
+
}, ref) {
|
|
11
|
+
return /*#__PURE__*/React.createElement(Icon, _extends({
|
|
12
|
+
ref: ref,
|
|
13
|
+
"data-name": "GoogleSlides",
|
|
14
|
+
"data-group": "m",
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
17
|
+
viewBox: viewBox
|
|
18
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
fill: "#E6B542",
|
|
20
|
+
d: "M2 1.333C2 .597 2.62 0 3.385 0H10l4 4v10.667c0 .736-.62 1.333-1.385 1.333h-9.23C2.62 16 2 15.403 2 14.667V1.333Z",
|
|
21
|
+
shapeRendering: "geometricPrecision"
|
|
22
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
23
|
+
fill: "#fff",
|
|
24
|
+
fillRule: "evenodd",
|
|
25
|
+
d: "M5 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5Zm6 2.5H5v3h6v-3Z",
|
|
26
|
+
clipRule: "evenodd",
|
|
27
|
+
shapeRendering: "geometricPrecision"
|
|
28
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
29
|
+
fill: "#EED58D",
|
|
30
|
+
d: "m14 4-4-4v4h4Z",
|
|
31
|
+
shapeRendering: "geometricPrecision"
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
GoogleSlides.displayName = 'GoogleSlides';
|
|
35
|
+
export default createBaseComponent(GoogleSlides);
|
|
@@ -49,7 +49,7 @@ YoutubeAlt.displayName = 'YoutubeAlt';
|
|
|
49
49
|
|
|
50
50
|
var _default = (0, _core.createBaseComponent)(YoutubeAlt);
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
console.warn(true, 'The "YoutubeAlt" icon is deprecated. Use the "YoutubeColored"', 'Icon');
|
|
54
54
|
|
|
55
55
|
exports["default"] = _default;
|
|
@@ -49,7 +49,7 @@ YoutubeAlt.displayName = 'YoutubeAlt';
|
|
|
49
49
|
|
|
50
50
|
var _default = (0, _core.createBaseComponent)(YoutubeAlt);
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
console.warn(true, 'The "YoutubeAlt" icon is deprecated. Use the "YoutubeColored"', 'Icon');
|
|
54
54
|
|
|
55
55
|
exports["default"] = _default;
|
|
@@ -48,7 +48,7 @@ YoutubeRed.displayName = 'YoutubeRed';
|
|
|
48
48
|
|
|
49
49
|
var _default = (0, _core.createBaseComponent)(YoutubeRed);
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
|
|
52
52
|
console.warn(true, 'The "YoutubeRed" icon is deprecated. Use the "YoutubeInvert"', 'Icon');
|
|
53
53
|
|
|
54
54
|
exports["default"] = _default;
|
|
@@ -48,7 +48,7 @@ YoutubeRed.displayName = 'YoutubeRed';
|
|
|
48
48
|
|
|
49
49
|
var _default = (0, _core.createBaseComponent)(YoutubeRed);
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
|
|
52
52
|
console.warn(true, 'The "YoutubeRed" icon is deprecated. Use the "YoutubeInvert"', 'Icon');
|
|
53
53
|
|
|
54
54
|
exports["default"] = _default;
|
package/lib/cjs/Icon.js
CHANGED
|
@@ -22,12 +22,12 @@ var _ref = require("@semcore/utils/lib/ref");
|
|
|
22
22
|
var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
|
|
23
23
|
var _excluded = ["keyboardFocused"];
|
|
24
24
|
/*__reshadow-styles__:"./style/icon.shadow.css"*/
|
|
25
|
-
var styles = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
26
|
-
"__SIcon": "
|
|
27
|
-
"--color": "--
|
|
28
|
-
"_keyboardFocused": "
|
|
29
|
-
"_interactive": "
|
|
30
|
-
"--color-interactive": "--color-
|
|
25
|
+
var styles = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SIcon_p9grf_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_p9grf)}.___SIcon_p9grf_gg_.__keyboardFocused_p9grf_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SIcon_p9grf_gg_.__interactive_p9grf_gg_{cursor:pointer}@media (hover:hover){.___SIcon_p9grf_gg_.__interactive_p9grf_gg_:hover{color:var(--color-interactive_p9grf)}}" /*__inner_css_end__*/, "p9grf_gg_") /*__reshadow_css_end__*/, {
|
|
26
|
+
"__SIcon": "___SIcon_p9grf_gg_",
|
|
27
|
+
"--color": "--color_p9grf",
|
|
28
|
+
"_keyboardFocused": "__keyboardFocused_p9grf_gg_",
|
|
29
|
+
"_interactive": "__interactive_p9grf_gg_",
|
|
30
|
+
"--color-interactive": "--color-interactive_p9grf"
|
|
31
31
|
});
|
|
32
32
|
function Icon(props, ref) {
|
|
33
33
|
var _useBox = (0, _flexBox.useBox)((0, _objectSpread2["default"])({
|
|
@@ -48,7 +48,7 @@ function Icon(props, ref) {
|
|
|
48
48
|
disabled: !interactive
|
|
49
49
|
}, other)),
|
|
50
50
|
keyboardFocused = _keyboardFocusEnhance.keyboardFocused,
|
|
51
|
-
|
|
51
|
+
propsEnhance = (0, _objectWithoutProperties2["default"])(_keyboardFocusEnhance, _excluded);
|
|
52
52
|
var sstyles = (0, _core.sstyled)(styles);
|
|
53
53
|
var _sstyles$cn = sstyles.cn('SIcon', {
|
|
54
54
|
'color-interactive': (0, _color.shade)(color, -0.12),
|
|
@@ -59,11 +59,12 @@ function Icon(props, ref) {
|
|
|
59
59
|
className = _sstyles$cn.className,
|
|
60
60
|
style = _sstyles$cn.style;
|
|
61
61
|
function onKeyDown(event) {
|
|
62
|
-
if (
|
|
63
|
-
return
|
|
62
|
+
if (propsEnhance.onKeyDown) {
|
|
63
|
+
return propsEnhance.onKeyDown(event);
|
|
64
64
|
}
|
|
65
65
|
if (interactive && event.code === 'Enter') {
|
|
66
|
-
|
|
66
|
+
var _propsEnhance$onClick;
|
|
67
|
+
(_propsEnhance$onClick = propsEnhance.onClick) === null || _propsEnhance$onClick === void 0 ? void 0 : _propsEnhance$onClick.call(propsEnhance, event);
|
|
67
68
|
}
|
|
68
69
|
}
|
|
69
70
|
var labelCheckRef = _react["default"].useRef();
|
|
@@ -77,9 +78,9 @@ function Icon(props, ref) {
|
|
|
77
78
|
return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({
|
|
78
79
|
role: interactive ? 'button' : undefined,
|
|
79
80
|
"aria-hidden": interactive ? undefined : 'true'
|
|
80
|
-
}, (0, _propsForElement["default"])(
|
|
81
|
-
style: Object.assign({}, style,
|
|
82
|
-
className: (0, _classnames["default"])(className,
|
|
81
|
+
}, (0, _propsForElement["default"])(propsEnhance), {
|
|
82
|
+
style: Object.assign({}, style, propsEnhance.style),
|
|
83
|
+
className: (0, _classnames["default"])(className, propsEnhance.className) || undefined,
|
|
83
84
|
onKeyDown: onKeyDown,
|
|
84
85
|
ref: forkedRef
|
|
85
86
|
}));
|
package/lib/cjs/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["_core","require","_react","_interopRequireDefault","_classnames","_flexBox","_color","_interopRequireWildcard","_keyboardFocusEnhance2","_propsForElement","_logger","_ref","_hasLabels","_excluded","styles","sstyled","insert","Icon","props","ref","_useBox","useBox","_objectSpread2","tag","width","height","viewBox","focusable","interactive","_useBox2","_slicedToArray2","SIcon","other","colorProps","color","resolveColor","_keyboardFocusEnhance","keyboardFocusEnhance","disabled","keyboardFocused","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["_core","require","_react","_interopRequireDefault","_classnames","_flexBox","_color","_interopRequireWildcard","_keyboardFocusEnhance2","_propsForElement","_logger","_ref","_hasLabels","_excluded","styles","sstyled","insert","Icon","props","ref","_useBox","useBox","_objectSpread2","tag","width","height","viewBox","focusable","interactive","_useBox2","_slicedToArray2","SIcon","other","colorProps","color","resolveColor","_keyboardFocusEnhance","keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties2","sstyles","_sstyles$cn","cn","shade","className","style","onKeyDown","event","code","_propsEnhance$onClick","onClick","call","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","hasLabels","current","displayName","forkedRef","useForkRef","createElement","_extends2","role","undefined","propsForElement","Object","assign","_default","createBaseComponent","exports"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n const [SIcon, other] = useBox(\n {\n tag: 'svg',\n 'data-ui-name': 'Icon',\n width: 16,\n height: 16,\n viewBox: '0 0 16 16',\n focusable: props.interactive,\n ...props,\n },\n ref,\n );\n\n const { interactive, color: colorProps } = props;\n const color = resolveColor(colorProps);\n const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n disabled: !interactive,\n ...other,\n });\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'color-interactive': shade(color, -0.12),\n 'use:color': color,\n interactive: interactive,\n keyboardFocused: keyboardFocused,\n });\n\n function onKeyDown(event) {\n if (propsEnhance.onKeyDown) {\n return propsEnhance.onKeyDown(event);\n }\n\n if (interactive && event.code === 'Enter') {\n propsEnhance.onClick?.(event);\n }\n }\n\n const labelCheckRef = React.useRef();\n React.useEffect(() => {\n if (!interactive) return;\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n !hasLabels(labelCheckRef.current),\n `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n props['data-ui-name'] || Icon.displayName,\n );\n }\n }, [interactive]);\n const forkedRef = useForkRef(ref, labelCheckRef);\n\n return (\n <SIcon\n role={interactive ? 'button' : undefined}\n aria-hidden={interactive ? undefined : 'true'}\n {...propsForElement(propsEnhance)}\n style={Object.assign({}, style, propsEnhance.style)}\n className={cn(className, propsEnhance.className) || undefined}\n onKeyDown={onKeyDown}\n ref={forkedRef}\n />\n );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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"}
|
package/lib/es6/Icon.js
CHANGED
|
@@ -15,12 +15,12 @@ import logger from '@semcore/utils/lib/logger';
|
|
|
15
15
|
import { useForkRef } from '@semcore/utils/lib/ref';
|
|
16
16
|
import hasLabels from '@semcore/utils/lib/hasLabels';
|
|
17
17
|
/*__reshadow-styles__:"./style/icon.shadow.css"*/
|
|
18
|
-
var styles = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
19
|
-
"__SIcon": "
|
|
20
|
-
"--color": "--
|
|
21
|
-
"_keyboardFocused": "
|
|
22
|
-
"_interactive": "
|
|
23
|
-
"--color-interactive": "--color-
|
|
18
|
+
var styles = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SIcon_p9grf_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_p9grf)}.___SIcon_p9grf_gg_.__keyboardFocused_p9grf_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SIcon_p9grf_gg_.__interactive_p9grf_gg_{cursor:pointer}@media (hover:hover){.___SIcon_p9grf_gg_.__interactive_p9grf_gg_:hover{color:var(--color-interactive_p9grf)}}" /*__inner_css_end__*/, "p9grf_gg_") /*__reshadow_css_end__*/, {
|
|
19
|
+
"__SIcon": "___SIcon_p9grf_gg_",
|
|
20
|
+
"--color": "--color_p9grf",
|
|
21
|
+
"_keyboardFocused": "__keyboardFocused_p9grf_gg_",
|
|
22
|
+
"_interactive": "__interactive_p9grf_gg_",
|
|
23
|
+
"--color-interactive": "--color-interactive_p9grf"
|
|
24
24
|
});
|
|
25
25
|
function Icon(props, ref) {
|
|
26
26
|
var _useBox = useBox(_objectSpread({
|
|
@@ -41,7 +41,7 @@ function Icon(props, ref) {
|
|
|
41
41
|
disabled: !interactive
|
|
42
42
|
}, other)),
|
|
43
43
|
keyboardFocused = _keyboardFocusEnhance.keyboardFocused,
|
|
44
|
-
|
|
44
|
+
propsEnhance = _objectWithoutProperties(_keyboardFocusEnhance, _excluded);
|
|
45
45
|
var sstyles = sstyled(styles);
|
|
46
46
|
var _sstyles$cn = sstyles.cn('SIcon', {
|
|
47
47
|
'color-interactive': shade(color, -0.12),
|
|
@@ -52,11 +52,12 @@ function Icon(props, ref) {
|
|
|
52
52
|
className = _sstyles$cn.className,
|
|
53
53
|
style = _sstyles$cn.style;
|
|
54
54
|
function onKeyDown(event) {
|
|
55
|
-
if (
|
|
56
|
-
return
|
|
55
|
+
if (propsEnhance.onKeyDown) {
|
|
56
|
+
return propsEnhance.onKeyDown(event);
|
|
57
57
|
}
|
|
58
58
|
if (interactive && event.code === 'Enter') {
|
|
59
|
-
|
|
59
|
+
var _propsEnhance$onClick;
|
|
60
|
+
(_propsEnhance$onClick = propsEnhance.onClick) === null || _propsEnhance$onClick === void 0 ? void 0 : _propsEnhance$onClick.call(propsEnhance, event);
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
63
|
var labelCheckRef = React.useRef();
|
|
@@ -70,9 +71,9 @@ function Icon(props, ref) {
|
|
|
70
71
|
return /*#__PURE__*/React.createElement(SIcon, _extends({
|
|
71
72
|
role: interactive ? 'button' : undefined,
|
|
72
73
|
"aria-hidden": interactive ? undefined : 'true'
|
|
73
|
-
}, propsForElement(
|
|
74
|
-
style: Object.assign({}, style,
|
|
75
|
-
className: cn(className,
|
|
74
|
+
}, propsForElement(propsEnhance), {
|
|
75
|
+
style: Object.assign({}, style, propsEnhance.style),
|
|
76
|
+
className: cn(className, propsEnhance.className) || undefined,
|
|
76
77
|
onKeyDown: onKeyDown,
|
|
77
78
|
ref: forkedRef
|
|
78
79
|
}));
|
package/lib/es6/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","useForkRef","hasLabels","styles","_sstyled","insert","Icon","props","ref","_useBox","_objectSpread","tag","width","height","viewBox","focusable","interactive","_useBox2","_slicedToArray","SIcon","other","colorProps","color","_keyboardFocusEnhance","disabled","keyboardFocused","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","useForkRef","hasLabels","styles","_sstyled","insert","Icon","props","ref","_useBox","_objectSpread","tag","width","height","viewBox","focusable","interactive","_useBox2","_slicedToArray","SIcon","other","colorProps","color","_keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties","_excluded","sstyles","_sstyles$cn","className","style","onKeyDown","event","code","_propsEnhance$onClick","onClick","call","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","createElement","_extends","role","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n const [SIcon, other] = useBox(\n {\n tag: 'svg',\n 'data-ui-name': 'Icon',\n width: 16,\n height: 16,\n viewBox: '0 0 16 16',\n focusable: props.interactive,\n ...props,\n },\n ref,\n );\n\n const { interactive, color: colorProps } = props;\n const color = resolveColor(colorProps);\n const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n disabled: !interactive,\n ...other,\n });\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'color-interactive': shade(color, -0.12),\n 'use:color': color,\n interactive: interactive,\n keyboardFocused: keyboardFocused,\n });\n\n function onKeyDown(event) {\n if (propsEnhance.onKeyDown) {\n return propsEnhance.onKeyDown(event);\n }\n\n if (interactive && event.code === 'Enter') {\n propsEnhance.onClick?.(event);\n }\n }\n\n const labelCheckRef = React.useRef();\n React.useEffect(() => {\n if (!interactive) return;\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n !hasLabels(labelCheckRef.current),\n `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n props['data-ui-name'] || Icon.displayName,\n );\n }\n }, [interactive]);\n const forkedRef = useForkRef(ref, labelCheckRef);\n\n return (\n <SIcon\n role={interactive ? 'button' : undefined}\n aria-hidden={interactive ? undefined : 'true'}\n {...propsForElement(propsEnhance)}\n style={Object.assign({}, style, propsEnhance.style)}\n className={cn(className, propsEnhance.className) || undefined}\n onKeyDown={onKeyDown}\n ref={forkedRef}\n />\n );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/icon",
|
|
3
3
|
"description": "Semrush Icon Component",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.16.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -19,9 +19,6 @@
|
|
|
19
19
|
"react": "16.8 - 18",
|
|
20
20
|
"react-dom": "16.8 - 18"
|
|
21
21
|
},
|
|
22
|
-
"jest": {
|
|
23
|
-
"preset": "@semcore/jest-preset-ui"
|
|
24
|
-
},
|
|
25
22
|
"repository": {
|
|
26
23
|
"type": "git",
|
|
27
24
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
@@ -29,13 +26,12 @@
|
|
|
29
26
|
},
|
|
30
27
|
"devDependencies": {
|
|
31
28
|
"@semcore/icon-transform-svg": "1.1.0",
|
|
32
|
-
"@semcore/
|
|
29
|
+
"@semcore/testing-utils": "1.0.0",
|
|
33
30
|
"@types/react": "18.0.21"
|
|
34
31
|
},
|
|
35
32
|
"scripts": {
|
|
36
33
|
"transform": "pnpm icon-transform-svg",
|
|
37
34
|
"build": "pnpm run clean && pnpm semcore-builder --source=js && pnpm run transform --configFile=./transform-svg-legacy.config.js && pnpm run transform --configFile=./transform-svg.config.js",
|
|
38
|
-
"test": "jest",
|
|
39
35
|
"clean": "node clean.js"
|
|
40
36
|
}
|
|
41
37
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
+
<path fill="#4D9D68" d="M3 2c0-1.105.93-2 2.077-2H15l6 6v16c0 1.105-.93 2-2.077 2H5.077C3.93 24 3 23.105 3 22V2Z"/>
|
|
3
|
+
<path fill="#fff" fill-rule="evenodd" d="M12.5 10H16v2h-3.5v-2Zm0 3H16v2h-3.5v-2Zm-1 2v-2H8v2h3.5ZM8 16v2h3.5v-2H8Zm4.5 0H16v2h-3.5v-2Zm-1-6v2H8v-2h3.5Zm0-1H17v10H7V9h4.5Z" clip-rule="evenodd"/>
|
|
4
|
+
<path fill="#98C8AD" d="m21 6-6-6v6h6Z"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
2
|
+
<path fill="#4D9D68" d="M2 1.333C2 .597 2.62 0 3.385 0H10l4 4v10.667c0 .736-.62 1.333-1.385 1.333h-9.23C2.62 16 2 15.403 2 14.667V1.333Z"/>
|
|
3
|
+
<path fill="#fff" fill-rule="evenodd" d="M8.5 7H11v1H8.5V7Zm0 2H11v1H8.5V9Zm-1 1V9H5v1h2.5ZM5 11v1h2.5v-1H5Zm3.5 0H11v1H8.5v-1Zm-1-4v1H5V7h2.5Zm0 6H4V6h8v7H7.5Z" clip-rule="evenodd"/>
|
|
4
|
+
<path fill="#98C8AD" d="m14 4-4-4v4h4Z"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
+
<path fill="#E6B542" d="M3 2c0-1.105.93-2 2.077-2H15l6 6v16c0 1.105-.93 2-2.077 2H5.077C3.93 24 3 23.105 3 22V2Z"/>
|
|
3
|
+
<path fill="#fff" fill-rule="evenodd" d="M8 9a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1H8Zm8 3H8v4h8v-4Z" clip-rule="evenodd"/>
|
|
4
|
+
<path fill="#EED58D" d="m21 6-6-6v6h6Z"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
2
|
+
<path fill="#E6B542" d="M2 1.333C2 .597 2.62 0 3.385 0H10l4 4v10.667c0 .736-.62 1.333-1.385 1.333h-9.23C2.62 16 2 15.403 2 14.667V1.333Z"/>
|
|
3
|
+
<path fill="#fff" fill-rule="evenodd" d="M5 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5Zm6 2.5H5v3h6v-3Z" clip-rule="evenodd"/>
|
|
4
|
+
<path fill="#EED58D" d="m14 4-4-4v4h4Z"/>
|
|
5
|
+
</svg>
|