@semcore/icon 2.28.0 → 2.29.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.29.0] - 2022-07-21
+
+### Added
+
+- Added icon `ClusteredList`.
+
 ## [2.28.0] - 2022-07-07
 
 ### Added

package/ClusteredList/l/index.d.ts

@@ -0,0 +1,7 @@
+
+import React from 'react';
+import { Merge } from '@semcore/core';
+import { IIconProps } from '@semcore/icon';
+declare const _default: import("@semcore/core").ComponentType<Merge<IIconProps, React.SVGAttributes<SVGElement>>, {}, {}>;
+export default _default;
+      

package/ClusteredList/l/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@semcore/core");
+
+var _icon = _interopRequireDefault(require("@semcore/icon"));
+
+var _excluded = ["width", "height", "viewBox"];
+
+function ClusteredList(_ref, ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '24' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '24' : _ref$height,
+      _ref$viewBox = _ref.viewBox,
+      viewBox = _ref$viewBox === void 0 ? '0 0 24 24' : _ref$viewBox,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
+    ref: ref,
+    "data-name": "ClusteredList",
+    "data-group": "l",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 9a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM4.5 22a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM19.5 22a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16.515 7.65c.309-.646.483-1.37.485-2.134a8.991 8.991 0 0 1 3.972 8.204 4.998 4.998 0 0 0-1.992-.193 6.985 6.985 0 0 0-2.465-5.876ZM14.6 19.501c.137.672.408 1.296.785 1.84A8.974 8.974 0 0 1 12 22a8.973 8.973 0 0 1-3.385-.658 4.973 4.973 0 0 0 .785-1.84A6.982 6.982 0 0 0 12 20c.919 0 1.796-.177 2.6-.499ZM4.5 13.5c-.512 0-1.006.077-1.472.22A8.991 8.991 0 0 1 7 5.515a4.98 4.98 0 0 0 .485 2.136 6.985 6.985 0 0 0-2.465 5.876 5.066 5.066 0 0 0-.52-.027Z",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+
+ClusteredList.displayName = 'ClusteredList';
+
+var _default = (0, _core.createBaseComponent)(ClusteredList);
+
+exports["default"] = _default;

package/ClusteredList/l/index.mjs

@@ -0,0 +1,32 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from 'react';
+import { createBaseComponent } from '@semcore/core';
+import Icon from '@semcore/icon';
+
+function ClusteredList({
+  width = '24',
+  height = '24',
+  viewBox = '0 0 24 24',
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    ref: ref,
+    "data-name": "ClusteredList",
+    "data-group": "l",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 9a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM4.5 22a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM19.5 22a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16.515 7.65c.309-.646.483-1.37.485-2.134a8.991 8.991 0 0 1 3.972 8.204 4.998 4.998 0 0 0-1.992-.193 6.985 6.985 0 0 0-2.465-5.876ZM14.6 19.501c.137.672.408 1.296.785 1.84A8.974 8.974 0 0 1 12 22a8.973 8.973 0 0 1-3.385-.658 4.973 4.973 0 0 0 .785-1.84A6.982 6.982 0 0 0 12 20c.919 0 1.796-.177 2.6-.499ZM4.5 13.5c-.512 0-1.006.077-1.472.22A8.991 8.991 0 0 1 7 5.515a4.98 4.98 0 0 0 .485 2.136 6.985 6.985 0 0 0-2.465 5.876 5.066 5.066 0 0 0-.52-.027Z",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+
+ClusteredList.displayName = 'ClusteredList';
+export default createBaseComponent(ClusteredList);

package/ClusteredList/m/index.d.ts

@@ -0,0 +1,7 @@
+
+import React from 'react';
+import { Merge } from '@semcore/core';
+import { IIconProps } from '@semcore/icon';
+declare const _default: import("@semcore/core").ComponentType<Merge<IIconProps, React.SVGAttributes<SVGElement>>, {}, {}>;
+export default _default;
+      

package/ClusteredList/m/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@semcore/core");
+
+var _icon = _interopRequireDefault(require("@semcore/icon"));
+
+var _excluded = ["width", "height", "viewBox"];
+
+function ClusteredList(_ref, ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '16' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '16' : _ref$height,
+      _ref$viewBox = _ref.viewBox,
+      viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
+    ref: ref,
+    "data-name": "ClusteredList",
+    "data-group": "m",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM2.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM13.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M11.5 2.5c0 .573-.138 1.114-.382 1.591A4.99 4.99 0 0 1 13 8v.035a3.529 3.529 0 0 1 1.992.298 6.998 6.998 0 0 0-3.542-6.425c.033.192.05.39.05.592ZM4.5 2.5c0 .573.138 1.114.382 1.591A4.99 4.99 0 0 0 3 8v.035a3.53 3.53 0 0 0-1.992.298A6.998 6.998 0 0 1 4.55 1.908c-.033.192-.05.39-.05.592ZM4.735 14.194a3.503 3.503 0 0 0 1.115-1.678A4.98 4.98 0 0 0 8 13a4.98 4.98 0 0 0 2.15-.484 3.504 3.504 0 0 0 1.115 1.678A6.968 6.968 0 0 1 8 15c-1.18 0-2.29-.291-3.265-.806Z",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+
+ClusteredList.displayName = 'ClusteredList';
+
+var _default = (0, _core.createBaseComponent)(ClusteredList);
+
+exports["default"] = _default;

package/ClusteredList/m/index.mjs

@@ -0,0 +1,32 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from 'react';
+import { createBaseComponent } from '@semcore/core';
+import Icon from '@semcore/icon';
+
+function ClusteredList({
+  width = '16',
+  height = '16',
+  viewBox = '0 0 16 16',
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    ref: ref,
+    "data-name": "ClusteredList",
+    "data-group": "m",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM2.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM13.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.5 2.5c0 .573-.138 1.114-.382 1.591A4.99 4.99 0 0 1 13 8v.035a3.529 3.529 0 0 1 1.992.298 6.998 6.998 0 0 0-3.542-6.425c.033.192.05.39.05.592ZM4.5 2.5c0 .573.138 1.114.382 1.591A4.99 4.99 0 0 0 3 8v.035a3.53 3.53 0 0 0-1.992.298A6.998 6.998 0 0 1 4.55 1.908c-.033.192-.05.39-.05.592ZM4.735 14.194a3.503 3.503 0 0 0 1.115-1.678A4.98 4.98 0 0 0 8 13a4.98 4.98 0 0 0 2.15-.484 3.504 3.504 0 0 0 1.115 1.678A6.968 6.968 0 0 1 8 15c-1.18 0-2.29-.291-3.265-.806Z",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+
+ClusteredList.displayName = 'ClusteredList';
+export default createBaseComponent(ClusteredList);

package/README.md

@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
 
 You can use the package the same way but without `/ui/` in the import path.
 
- </details>
-
 ```jsx
 import Accordion from '@semcore/icon';
 ```
 
+</details>
+
 ## 👤 Author
 
 [UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)

package/lib/cjs/Icon.js

@@ -46,16 +46,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_1ody4_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_1yueufi)}.___SIcon_1ody4_gg_.__keyboardFocused_1ody4_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_1ody4_gg_.__interactive_1ody4_gg_{cursor:pointer}.___SIcon_1ody4_gg_.__interactive_1ody4_gg_:hover{color:var(--color-interactive_1yueufi)}"
+".___SIcon_137mp_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_137mp)}.___SIcon_137mp_gg_.__keyboardFocused_137mp_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_137mp_gg_.__interactive_137mp_gg_{cursor:pointer}.___SIcon_137mp_gg_.__interactive_137mp_gg_:hover{color:var(--color-interactive_137mp)}"
 /*__inner_css_end__*/
-, "1yueufi_gg_")
+, "137mp_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1ody4_gg_",
-  "--color": "--color_1yueufi",
-  "_keyboardFocused": "__keyboardFocused_1ody4_gg_",
-  "_interactive": "__interactive_1ody4_gg_",
-  "--color-interactive": "--color-interactive_1yueufi"
+  "__SIcon": "___SIcon_137mp_gg_",
+  "--color": "--color_137mp",
+  "_keyboardFocused": "__keyboardFocused_137mp_gg_",
+  "_interactive": "__interactive_137mp_gg_",
+  "--color-interactive": "--color-interactive_137mp"
 });
 
 function Icon(props, ref) {

package/lib/es6/Icon.js

@@ -22,16 +22,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_1ody4_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_1yueufi)}.___SIcon_1ody4_gg_.__keyboardFocused_1ody4_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_1ody4_gg_.__interactive_1ody4_gg_{cursor:pointer}.___SIcon_1ody4_gg_.__interactive_1ody4_gg_:hover{color:var(--color-interactive_1yueufi)}"
+".___SIcon_137mp_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_137mp)}.___SIcon_137mp_gg_.__keyboardFocused_137mp_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_137mp_gg_.__interactive_137mp_gg_{cursor:pointer}.___SIcon_137mp_gg_.__interactive_137mp_gg_:hover{color:var(--color-interactive_137mp)}"
 /*__inner_css_end__*/
-, "1yueufi_gg_")
+, "137mp_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1ody4_gg_",
-  "--color": "--color_1yueufi",
-  "_keyboardFocused": "__keyboardFocused_1ody4_gg_",
-  "_interactive": "__interactive_1ody4_gg_",
-  "--color-interactive": "--color-interactive_1yueufi"
+  "__SIcon": "___SIcon_137mp_gg_",
+  "--color": "--color_137mp",
+  "_keyboardFocused": "__keyboardFocused_137mp_gg_",
+  "_interactive": "__interactive_137mp_gg_",
+  "--color-interactive": "--color-interactive_137mp"
 });
 
 function Icon(props, ref) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/icon",
   "description": "SEMRush Icon Component",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

package/svg-new/icon/ClusteredList/l.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 9a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM4.5 22a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM19.5 22a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M16.515 7.65c.309-.646.483-1.37.485-2.134a8.991 8.991 0 0 1 3.972 8.204 4.998 4.998 0 0 0-1.992-.193 6.985 6.985 0 0 0-2.465-5.876ZM14.6 19.501c.137.672.408 1.296.785 1.84A8.974 8.974 0 0 1 12 22a8.973 8.973 0 0 1-3.385-.658 4.973 4.973 0 0 0 .785-1.84A6.982 6.982 0 0 0 12 20c.919 0 1.796-.177 2.6-.499ZM4.5 13.5c-.512 0-1.006.077-1.472.22A8.991 8.991 0 0 1 7 5.515a4.98 4.98 0 0 0 .485 2.136 6.985 6.985 0 0 0-2.465 5.876 5.066 5.066 0 0 0-.52-.027Z"/></svg>

package/svg-new/icon/ClusteredList/m.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM2.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM13.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm0-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z"/><path d="M11.5 2.5c0 .573-.138 1.114-.382 1.591A4.99 4.99 0 0 1 13 8v.035a3.529 3.529 0 0 1 1.992.298 6.998 6.998 0 0 0-3.542-6.425c.033.192.05.39.05.592ZM4.5 2.5c0 .573.138 1.114.382 1.591A4.99 4.99 0 0 0 3 8v.035a3.53 3.53 0 0 0-1.992.298A6.998 6.998 0 0 1 4.55 1.908c-.033.192-.05.39-.05.592ZM4.735 14.194a3.503 3.503 0 0 0 1.115-1.678A4.98 4.98 0 0 0 8 13a4.98 4.98 0 0 0 2.15-.484 3.504 3.504 0 0 0 1.115 1.678A6.968 6.968 0 0 1 8 15c-1.18 0-2.29-.291-3.265-.806Z"/></svg>

package/src/Icon.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { createBaseComponent, sstyled } from '@semcore/core';
-import { useBox } from '@semcore/flex-box';
-import resolveColor, { shade } from '@semcore/utils/lib/color';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import propsForElement from '@semcore/utils/lib/propsForElement';
-
-import styles from './style/icon.shadow.css';
-
-function Icon(props, ref) {
-  const [SIcon, other] = useBox(
-    {
-      tag: 'svg',
-      'data-ui-name': 'Icon',
-      width: 16,
-      height: 16,
-      viewBox: '0 0 16 16',
-      ...props,
-    },
-    ref,
-  );
-
-  const { interactive, color: colorProps } = props;
-  const color = resolveColor(colorProps);
-  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({
-    disabled: !interactive,
-    ...other,
-  });
-  const sstyles = sstyled(styles);
-  const { className, style } = sstyles.cn('SIcon', {
-    'color-interactive': shade(color, -0.12),
-    'use:color': color,
-    interactive: interactive,
-    keyboardFocused: keyboardFocused,
-  });
-
-  return (
-    <SIcon
-      {...propsForElement(propsWithKeyboardEnhance)}
-      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}
-      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}
-    />
-  );
-}
-
-Icon.displayName = 'Icon';
-
-export default createBaseComponent(Icon);

package/src/index.d.ts

@@ -1,17 +0,0 @@
-import { IBoxProps } from '@semcore/flex-box';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import { ReturnEl } from '@semcore/core';
-
-export interface IIconProps extends IBoxProps, IKeyboardFocusProps {
-  width?: string | number;
-  height?: string | number;
-  viewBox?: string;
-  /** Make an icon interactive */
-  interactive?: boolean;
-  /** Icon color */
-  color?: string;
-}
-
-declare const Icon: <T>(props: IIconProps & T) => ReturnEl;
-
-export default Icon;

package/src/index.js

@@ -1 +0,0 @@
-export { default } from './Icon';

package/src/style/icon.shadow.css

@@ -1,23 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SIcon {
-  display: inline-block;
-  user-select: none;
-  shape-rendering: geometricPrecision;
-  box-sizing: content-box;
-  fill: currentColor;
-  flex-shrink: 0;
-  outline: none;
-  color: var(--color);
-}
-
-SIcon[keyboardFocused] {
-  box-shadow: var(--keyboard-focus);
-}
-
-SIcon[interactive] {
-  cursor: pointer;
-  &:hover {
-    color: var(--color-interactive);
-  }
-}