tgui: Icon Stacking (#54212)

* adds icon stacking to tgui

* Docmentation for Icon.Stack, added classnames to icon, Added a component that can stack child icons.

Co-authored-by: Style Mistake <stylemistake@gmail.com>

* Cosmetic 1

* Cosmetic 2

Co-authored-by: Style Mistake <stylemistake@gmail.com>

tgui/docs/component-reference.md

@@ -28,6 +28,7 @@ Make sure to add new items to this list if you document new components.
   - [`Grid`](#grid)
   - [`Grid.Column`](#gridcolumn)
   - [`Icon`](#icon)
+  - [`Icon.Stack`](#iconstack)
   - [`Input`](#input)
   - [`Knob`](#knob)
   - [`LabeledControls`](#labeledcontrols)
@@ -529,6 +530,22 @@ Fractional numbers are supported.
 - `spin: boolean` - Whether an icon should be spinning. Good for load
 indicators.
 
+### `Icon.Stack`
+
+Renders children icons on top of each other in order to make your own icon.
+
+```jsx
+<Icon.Stack>
+  <Icon name="pen" />
+  <Icon name="slash" />
+</Icon.Stack>
+```
+
+**Props:**
+
+- See inherited props: [Box](#box)
+- `children: Icon` - Icons to stack.
+
 ### `Input`
 
 A basic text input, which allow users to enter text into a UI.

tgui/packages/tgui/components/Icon.js

@@ -1,6 +1,8 @@
 /**
  * @file
  * @copyright 2020 Aleksej Komarov
+ * @author Original Aleksej Komarov
+ * @author Changes ThePotato97
  * @license MIT
  */
 
@@ -10,7 +12,16 @@ import { Box } from './Box';
 const FA_OUTLINE_REGEX = /-o$/;
 
 export const Icon = props => {
-  const { name, size, spin, className, style = {}, rotation, ...rest } = props;
+  const {
+    name,
+    size,
+    spin,
+    className,
+    style = {},
+    rotation,
+    inverse,
+    ...rest
+  } = props;
   if (size) {
     style['font-size'] = (size * 100) + '%';
   }
@@ -23,6 +34,7 @@ export const Icon = props => {
     <Box
       as="i"
       className={classes([
+        'Icon',
         className,
         faRegular ? 'far' : 'fas',
         'fa-' + faName,
@@ -34,3 +46,26 @@ export const Icon = props => {
 };
 
 Icon.defaultHooks = pureComponentHooks;
+
+export const IconStack = props => {
+  const {
+    className,
+    style = {},
+    children,
+    ...rest
+  } = props;
+  return (
+    <Box
+      as="span"
+      class={classes([
+        'IconStack',
+        className,
+      ])}
+      style={style}
+      {...rest}>
+      {children}
+    </Box>
+  );
+};
+
+Icon.Stack = IconStack;

tgui/packages/tgui/styles/components/Icon.scss

@@ -0,0 +1,26 @@
+/**
+ * @file
+ * @copyright 2020
+ * @author ThePotato97 (https://github.com/ThePotato97)
+ * @license ISC
+ */
+
+.IconStack > .Icon {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
+
+.IconStack {
+  position: relative;
+  display: inline-block;
+  height: 1.2em;
+  line-height: 2em;
+  vertical-align: middle;
+
+  &:after {
+    color: transparent;
+    content: '.';
+  }
+}

tgui/packages/tgui/styles/main.scss

@@ -25,6 +25,7 @@
 @include meta.load-css('./components/Dropdown.scss');
 @include meta.load-css('./components/FatalError.scss');
 @include meta.load-css('./components/Flex.scss');
+@include meta.load-css('./components/Icon.scss');
 @include meta.load-css('./components/Input.scss');
 @include meta.load-css('./components/Knob.scss');
 @include meta.load-css('./components/LabeledList.scss');