Allow Icon to receive ref

package.json

@@ -24,7 +24,7 @@
     "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --build",
     "prettier-check": "prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
     "prettier-write": "prettier --write --log-level silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
-    "process-icons": "node web/packages/design/src/Icon/script/script.js & pnpm prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'",
+    "process-icons": "node web/packages/design/src/Icon/script/script.js & pnpm prettier --log-level silent --write 'web/packages/design/src/Icon/**/*.tsx'",
     "nop": "exit 0"
   },
   "private": true,

web/packages/design/src/Icon/Icon.story.tsx

@@ -0,0 +1,51 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+
+import { Flex } from 'design';
+import { blink } from 'design/keyframes';
+
+import { Broadcast } from './Icons/Broadcast';
+
+export default {
+  // Nest stories under Icon/Icon, so that Icon/Icons which lists all icons is the first story.
+  title: 'Design/Icon/Icon',
+};
+
+export const WithRef = () => {
+  const nodeRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    nodeRef.current?.scrollIntoView({ block: 'center' });
+  }, []);
+
+  return (
+    <Flex flexDirection="column" height="200vh" justifyContent="center">
+      <div>
+        <StyledBroadcast ref={nodeRef} />
+        <p>On the first render, the view should be scrolled to the icon.</p>
+      </div>
+    </Flex>
+  );
+};
+
+const StyledBroadcast = styled(Broadcast)`
+  animation: ${blink} 1s ease-in-out infinite;
+`;

web/packages/design/src/Icon/Icon.tsx

@@ -16,42 +16,40 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { PropsWithChildren } from 'react';
+import React, { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import { borderRadius, color, space, SpaceProps } from 'design/system';
 
-export function Icon({
-  size = 'medium',
-  children,
-  ...otherProps
-}: PropsWithChildren<Props>) {
-  let iconSize = size;
-  if (size === 'small') {
-    iconSize = 16;
+export const Icon = forwardRef<HTMLSpanElement, PropsWithChildren<Props>>(
+  ({ size = 'medium', children, ...otherProps }, ref) => {
+    let iconSize = size;
+    if (size === 'small') {
+      iconSize = 16;
+    }
+    if (size === 'medium') {
+      iconSize = 20;
+    }
+    if (size === 'large') {
+      iconSize = 24;
+    }
+    if (size === 'extra-large') {
+      iconSize = 32;
+    }
+    return (
+      <StyledIcon {...otherProps} ref={ref}>
+        <svg
+          fill="currentColor"
+          height={iconSize}
+          width={iconSize}
+          viewBox="0 0 24 24"
+        >
+          {children}
+        </svg>
+      </StyledIcon>
+    );
   }
-  if (size === 'medium') {
-    iconSize = 20;
-  }
-  if (size === 'large') {
-    iconSize = 24;
-  }
-  if (size === 'extra-large') {
-    iconSize = 32;
-  }
-  return (
-    <StyledIcon {...otherProps}>
-      <svg
-        fill="currentColor"
-        height={iconSize}
-        width={iconSize}
-        viewBox="0 0 24 24"
-      >
-        {children}
-      </svg>
-    </StyledIcon>
-  );
-}
+);
 
 const StyledIcon = styled.span`
   display: inline-flex;
@@ -65,6 +63,9 @@ const StyledIcon = styled.span`
 
 export type IconSize = 'small' | 'medium' | 'large' | 'extra-large' | number;
 
+/**
+ * IconProps are used in each autogenerated icon component.
+ */
 export type IconProps = SpaceProps & {
   size?: IconSize;
   color?: string;
@@ -79,7 +80,11 @@ export type IconProps = SpaceProps & {
   className?: string;
 };
 
+/**
+ * Props are used on the Icon component, but not in autogenerated icon components.
+ */
 type Props = IconProps & {
   children?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[];
   a?: any;
+  ref?: ForwardedRef<HTMLSpanElement>;
 };

web/packages/design/src/Icon/Icons/Add.tsx

@@ -40,6 +40,8 @@ SOFTWARE.
 
 */
 
+import { forwardRef } from 'react';
+
 import { Icon, IconProps } from '../Icon';
 
 /*
@@ -48,10 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT.
 
 */
 
-export function Add({ size = 24, color, ...otherProps }: IconProps) {
-  return (
-    <Icon size={size} color={color} className="icon icon-add" {...otherProps}>
+export const Add = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-add"
+      {...otherProps}
+      ref={ref}
+    >
       <path d="M12.75 3.75C12.75 3.33579 12.4142 3 12 3C11.5858 3 11.25 3.33579 11.25 3.75V11.25H3.75C3.33579 11.25 3 11.5858 3 12C3 12.4142 3.33579 12.75 3.75 12.75H11.25V20.25C11.25 20.6642 11.5858 21 12 21C12.4142 21 12.75 20.6642 12.75 20.25V12.75H20.25C20.6642 12.75 21 12.4142 21 12C21 11.5858 20.6642 11.25 20.25 11.25H12.75V3.75Z" />
     </Icon>
-  );
-}
+  )
+);

web/packages/design/src/Icon/Icons/AddCircle.tsx

@@ -40,6 +40,8 @@ SOFTWARE.
 
 */
 
+import { forwardRef } from 'react';
+
 import { Icon, IconProps } from '../Icon';
 
 /*
@@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT.
 
 */
 
-export function AddCircle({ size = 24, color, ...otherProps }: IconProps) {
-  return (
+export const AddCircle = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
     <Icon
       size={size}
       color={color}
       className="icon icon-addcircle"
       {...otherProps}
+      ref={ref}
     >
       <path d="M6.46154 12C6.46154 11.4902 6.87481 11.0769 7.38462 11.0769H11.0769V7.38462C11.0769 6.87481 11.4902 6.46154 12 6.46154C12.5098 6.46154 12.9231 6.87481 12.9231 7.38462V11.0769H16.6154C17.1252 11.0769 17.5385 11.4902 17.5385 12C17.5385 12.5098 17.1252 12.9231 16.6154 12.9231H12.9231V16.6154C12.9231 17.1252 12.5098 17.5385 12 17.5385C11.4902 17.5385 11.0769 17.1252 11.0769 16.6154V12.9231H7.38462C6.87481 12.9231 6.46154 12.5098 6.46154 12Z" />
       <path
@@ -63,5 +66,5 @@ export function AddCircle({ size = 24, color, ...otherProps }: IconProps) {
         d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 1.84615C6.39219 1.84615 1.84615 6.39219 1.84615 12C1.84615 17.6078 6.39219 22.1538 12 22.1538C17.6078 22.1538 22.1538 17.6078 22.1538 12C22.1538 6.39219 17.6078 1.84615 12 1.84615Z"
       />
     </Icon>
-  );
-}
+  )
+);

web/packages/design/src/Icon/Icons/AddUsers.tsx

@@ -40,6 +40,8 @@ SOFTWARE.
 
 */
 
+import { forwardRef } from 'react';
+
 import { Icon, IconProps } from '../Icon';
 
 /*
@@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT.
 
 */
 
-export function AddUsers({ size = 24, color, ...otherProps }: IconProps) {
-  return (
+export const AddUsers = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
     <Icon
       size={size}
       color={color}
       className="icon icon-addusers"
       {...otherProps}
+      ref={ref}
     >
       <path
         fillRule="evenodd"
@@ -63,5 +66,5 @@ export function AddUsers({ size = 24, color, ...otherProps }: IconProps) {
       />
       <path d="M21.75 10.5C21.75 10.0858 21.4142 9.75 21 9.75C20.5858 9.75 20.25 10.0858 20.25 10.5V12H18.75C18.3358 12 18 12.3358 18 12.75C18 13.1642 18.3358 13.5 18.75 13.5H20.25V15C20.25 15.4142 20.5858 15.75 21 15.75C21.4142 15.75 21.75 15.4142 21.75 15V13.5H23.25C23.6642 13.5 24 13.1642 24 12.75C24 12.3358 23.6642 12 23.25 12H21.75V10.5Z" />
     </Icon>
-  );
-}
+  )
+);

web/packages/design/src/Icon/Icons/AlarmRing.tsx

@@ -40,6 +40,8 @@ SOFTWARE.
 
 */
 
+import { forwardRef } from 'react';
+
 import { Icon, IconProps } from '../Icon';
 
 /*
@@ -48,13 +50,14 @@ THIS FILE IS GENERATED. DO NOT EDIT.
 
 */
 
-export function AlarmRing({ size = 24, color, ...otherProps }: IconProps) {
-  return (
+export const AlarmRing = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
     <Icon
       size={size}
       color={color}
       className="icon icon-alarmring"
       {...otherProps}
+      ref={ref}
     >
       <path d="M5.78033 2.78033C6.07322 2.48744 6.07322 2.01256 5.78033 1.71967C5.48744 1.42678 5.01256 1.42678 4.71967 1.71967L1.71967 4.71967C1.42678 5.01256 1.42678 5.48744 1.71967 5.78033C2.01256 6.07322 2.48744 6.07322 2.78033 5.78033L5.78033 2.78033Z" />
       <path d="M12.75 6.75C12.75 6.33579 12.4142 6 12 6C11.5858 6 11.25 6.33579 11.25 6.75V12C11.25 12.4142 11.5858 12.75 12 12.75H17.25C17.6642 12.75 18 12.4142 18 12C18 11.5858 17.6642 11.25 17.25 11.25H12.75V6.75Z" />
@@ -65,5 +68,5 @@ export function AlarmRing({ size = 24, color, ...otherProps }: IconProps) {
       />
       <path d="M18.2197 1.71967C18.5126 1.42678 18.9874 1.42678 19.2803 1.71967L22.2803 4.71967C22.5732 5.01256 22.5732 5.48744 22.2803 5.78033C21.9874 6.07322 21.5126 6.07322 21.2197 5.78033L18.2197 2.78033C17.9268 2.48744 17.9268 2.01256 18.2197 1.71967Z" />
     </Icon>
-  );
-}
+  )
+);

web/packages/design/src/Icon/Icons/AmazonAws.tsx

@@ -40,6 +40,8 @@ SOFTWARE.
 
 */
 
+import { forwardRef } from 'react';
+
 import { Icon, IconProps } from '../Icon';
 
 /*
@@ -48,15 +50,16 @@ THIS FILE IS GENERATED. DO NOT EDIT.
 
 */
 
-export function AmazonAws({ size = 24, color, ...otherProps }: IconProps) {
-  return (
+export const AmazonAws = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
     <Icon
       size={size}
       color={color}
       className="icon icon-amazonaws"
       {...otherProps}
+      ref={ref}
     >
       <path d="M7.19944 10.7777C7.19944 11.049 7.22877 11.2681 7.28011 11.4285C7.33879 11.5899 7.41211 11.7659 7.51479 11.9566C7.55146 12.0143 7.56612 12.073 7.56612 12.1243C7.56612 12.1976 7.52211 12.271 7.42679 12.3443L6.96571 12.6514C6.91266 12.69 6.84696 12.7143 6.77576 12.7174L6.77503 12.7174C6.70171 12.7174 6.62836 12.6807 6.55596 12.6147C6.46091 12.5127 6.37416 12.4003 6.29838 12.2803L6.29288 12.271C6.22585 12.1595 6.15007 12.0181 6.08027 11.8731L6.06553 11.8392C5.49535 12.512 4.7776 12.8485 3.9141 12.8485C3.29992 12.8485 2.80951 12.6734 2.45109 12.3223C2.09266 11.9703 1.91026 11.5028 1.91026 10.917C1.91026 10.2955 2.12934 9.78952 2.57576 9.41002C3.02219 9.02959 3.61434 8.83894 4.36785 8.83894C4.61718 8.83894 4.87293 8.86094 5.14335 8.89761C5.41468 8.93429 5.69336 8.99294 5.98486 9.05894V8.52451C5.98486 7.96809 5.86843 7.58033 5.64111 7.35393C5.40735 7.1266 5.01228 7.01751 4.44943 7.01751C4.19275 7.01751 3.92875 7.04593 3.65835 7.11193C3.38794 7.17793 3.12392 7.2586 2.86817 7.36126C2.79901 7.39346 2.71391 7.42586 2.62634 7.45267L2.61149 7.45658C2.5771 7.46808 2.53733 7.47564 2.4961 7.47764L2.49507 7.47768C2.39239 7.47768 2.34107 7.40435 2.34107 7.25126V6.89283C2.34107 6.7755 2.35574 6.6875 2.39239 6.63616C2.44718 6.57063 2.51591 6.51864 2.5942 6.48445L2.59772 6.48308C2.85347 6.35108 3.16055 6.24108 3.51898 6.15308C3.84921 6.06503 4.22837 6.01446 4.61932 6.01446C4.63404 6.01446 4.64872 6.01452 4.66339 6.01467L4.66113 6.01465C5.53196 6.01465 6.16814 6.21265 6.57789 6.60773C6.98032 7.00191 7.18472 7.60231 7.18472 8.40716L7.19944 10.7777ZM4.22942 11.8906C4.4705 11.8906 4.71893 11.8466 4.98293 11.7586C5.24601 11.6705 5.48068 11.5101 5.67776 11.291C5.79508 11.1517 5.88308 10.9977 5.92708 10.8217C5.97016 10.6466 6.00041 10.434 6.00041 10.1855V9.87846C5.81882 9.83137 5.59025 9.78769 5.35757 9.75712L5.32666 9.75381C5.12051 9.72616 4.88189 9.71018 4.63961 9.70981H4.63915C4.14873 9.70981 3.79032 9.80514 3.54832 10.0031C3.30725 10.2002 3.19082 10.478 3.19082 10.8437C3.19082 11.1875 3.2779 11.4441 3.46125 11.6192C3.63632 11.8026 3.89207 11.8906 4.22942 11.8906ZM10.1053 12.6807C9.97328 12.6807 9.88528 12.6587 9.8266 12.6074C9.76793 12.5634 9.7166 12.4607 9.6726 12.3223L7.95385 6.66555C7.92265 6.58023 7.8994 6.48087 7.88834 6.37785L7.88784 6.3722C7.88784 6.25487 7.94652 6.18887 8.06292 6.18887H8.78068C8.9191 6.18887 9.01443 6.21179 9.06485 6.2622C9.12443 6.3062 9.16843 6.40887 9.21153 6.5482L10.4417 11.3919L11.583 6.5482C11.6196 6.40152 11.6636 6.3062 11.7214 6.2622C11.7963 6.2156 11.8871 6.18795 11.9845 6.18795C11.9951 6.18795 12.0057 6.18827 12.0162 6.18893L12.0147 6.18887H12.5995C12.7389 6.18887 12.8342 6.21179 12.8929 6.2622C12.9506 6.3062 13.0029 6.40887 13.0313 6.5482L14.1872 11.4505L15.4532 6.5482C15.4972 6.40152 15.5485 6.3062 15.5998 6.2622C15.6722 6.21562 15.7605 6.18795 15.8553 6.18795C15.8657 6.18795 15.8761 6.18829 15.8863 6.18893L15.8849 6.18887H16.566C16.6824 6.18887 16.7493 6.24845 16.7493 6.3722C16.7493 6.40887 16.7411 6.44552 16.7338 6.48952C16.7207 6.55954 16.703 6.62105 16.68 6.67996L16.6824 6.67287L14.9197 12.3287C14.8757 12.4754 14.8243 12.5698 14.7657 12.6138C14.6943 12.6602 14.607 12.6878 14.5132 12.6878C14.5043 12.6878 14.4955 12.6876 14.4867 12.6871L14.4879 12.6872H13.8581C13.7197 12.6872 13.6244 12.6652 13.5648 12.6138C13.5071 12.5625 13.4557 12.4672 13.4273 12.3205L12.2925 7.60148L11.165 12.3132C11.1283 12.4598 11.0852 12.5552 11.0275 12.6065C10.9679 12.6578 10.8652 12.6798 10.7342 12.6798L10.1053 12.6807ZM19.5067 12.8778C19.1262 12.8778 18.7458 12.8338 18.3801 12.7467C18.0143 12.6587 17.7292 12.5634 17.5386 12.4534C17.4212 12.3883 17.3415 12.315 17.3121 12.249C17.2848 12.1886 17.2686 12.1181 17.2681 12.0438V11.6706C17.2681 11.5175 17.3268 11.4441 17.4359 11.4441C17.4799 11.4441 17.5239 11.4515 17.5679 11.4661C17.6119 11.4808 17.6779 11.5101 17.7512 11.5395C17.9996 11.6495 18.27 11.7366 18.5561 11.7952C18.8485 11.8539 19.1336 11.8832 19.4269 11.8832C19.8871 11.8832 20.2464 11.8026 20.4948 11.6412C20.7245 11.5007 20.8755 11.2512 20.8755 10.9665C20.8755 10.9594 20.8754 10.9524 20.8752 10.9454L20.8752 10.9464C20.8754 10.9404 20.8755 10.9332 20.8755 10.9261C20.8755 10.7351 20.8003 10.5616 20.6779 10.4337L20.6782 10.434C20.5462 10.2955 20.2968 10.1709 19.9384 10.0535L18.8778 9.72354C18.3434 9.55579 17.9483 9.30736 17.7072 8.97829C17.4802 8.68827 17.3425 8.3188 17.3406 7.91723V7.91678C17.3406 7.6097 17.4075 7.33928 17.5386 7.1046C17.6706 6.87085 17.8456 6.66552 18.0656 6.5051C18.2856 6.33643 18.5331 6.21177 18.8265 6.12467C19.1198 6.03667 19.4269 6 19.7487 6C19.9091 6 20.0777 6.00733 20.2391 6.02933C20.4068 6.05133 20.5599 6.08065 20.7139 6.11C20.8606 6.14667 20.9999 6.18333 21.131 6.22642C21.263 6.27043 21.3657 6.31443 21.439 6.35843C21.5271 6.40341 21.6007 6.46525 21.6579 6.54023L21.659 6.54177C21.7002 6.60307 21.7248 6.67854 21.7248 6.75976C21.7248 6.76788 21.7245 6.77596 21.724 6.78395L21.7241 6.78285V7.1266C21.7241 7.2806 21.6654 7.36128 21.5554 7.36128C21.4519 7.34912 21.3579 7.31797 21.2738 7.2713L21.2776 7.27328C20.8796 7.09292 20.4145 6.98779 19.9249 6.98779C19.9068 6.98779 19.8886 6.98794 19.8706 6.98822L19.8733 6.98818C19.4562 6.98818 19.1262 7.05326 18.8998 7.1926C18.6725 7.33193 18.5561 7.54368 18.5561 7.84343C18.5561 8.04876 18.6294 8.22476 18.7761 8.36319C18.9218 8.50251 19.1922 8.64186 19.58 8.76651L20.6195 9.09469C21.1457 9.26336 21.527 9.49802 21.7534 9.79777C21.9798 10.0975 22.0898 10.4413 22.0898 10.8217C22.0898 11.1361 22.0238 11.4221 21.9001 11.6705C21.7681 11.9199 21.5921 12.139 21.3657 12.315C21.1383 12.4983 20.8679 12.6294 20.5535 12.7247C20.2235 12.8265 19.8807 12.8778 19.5067 12.8778V12.8778ZM20.8899 16.4345C18.4827 18.2128 14.9847 19.1561 11.978 19.1561C7.76319 19.1561 3.96633 17.5978 1.09716 15.0072C0.870734 14.8028 1.07516 14.5242 1.34649 14.6855C4.4485 16.4849 8.2756 17.5758 12.2338 17.5758C14.905 17.5758 17.8383 17.0193 20.5388 15.8781C20.9413 15.6947 21.285 16.1411 20.8899 16.4345ZM21.8928 15.2923C21.5848 14.8981 19.8578 15.1026 19.0749 15.1979C18.8412 15.2272 18.8045 15.0219 19.0172 14.8679C20.3922 13.9026 22.6536 14.1804 22.9167 14.5021C23.1798 14.8321 22.8434 17.0927 21.5554 18.1752C21.3584 18.3439 21.1677 18.2559 21.2557 18.0368C21.549 17.3126 22.1999 15.681 21.8928 15.2923Z" />
     </Icon>
-  );
-}
+  )
+);

web/packages/design/src/Icon/Icons/Apartment.tsx

@@ -40,6 +40,8 @@ SOFTWARE.
 
 */
 
+import { forwardRef } from 'react';
+
 import { Icon, IconProps } from '../Icon';
 
 /*
@@ -48,19 +50,20 @@ THIS FILE IS GENERATED. DO NOT EDIT.
 
 */
 
-export function Apartment({ size = 24, color, ...otherProps }: IconProps) {
-  return (
+export const Apartment = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
     <Icon
       size={size}
       color={color}
       className="icon icon-apartment"
       {...otherProps}
+      ref={ref}
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12.1394 1.63455L3.38938 7.05159C3.33527 7.08512 3.28556 7.12402 3.24106 7.16746C3.18686 7.22037 3.14038 7.28002 3.10307 7.34494C3.07319 7.39694 3.0496 7.4516 3.03257 7.50793C3.01089 7.57964 2.99985 7.65406 3 7.72911V19.5H1.5C1.08579 19.5 0.75 19.8358 0.75 20.25C0.75 20.6642 1.08579 21 1.5 21H3H4.5H12H13.5H20.25H22.5C22.9142 21 23.25 20.6642 23.25 20.25C23.25 19.8358 22.9142 19.5 22.5 19.5H21V9C21 8.60218 20.842 8.22065 20.5607 7.93934C20.2794 7.65804 19.8978 7.5 19.5 7.5H13.5V2.31003C13.4998 2.0159 13.3168 1.73254 13.0375 1.59388C12.7582 1.45522 12.4028 1.47131 12.1394 1.63455ZM19.5 19.5V9H13.5V19.5H19.5ZM12 19.5V8.25V3.48503L4.5 8.12821V19.5H12ZM9.75 9.75C10.1642 9.75 10.5 10.0858 10.5 10.5V12C10.5 12.4142 10.1642 12.75 9.75 12.75C9.33579 12.75 9 12.4142 9 12V10.5C9 10.0858 9.33579 9.75 9.75 9.75ZM7.5 10.5C7.5 10.0858 7.16421 9.75 6.75 9.75C6.33579 9.75 6 10.0858 6 10.5V12C6 12.4142 6.33579 12.75 6.75 12.75C7.16421 12.75 7.5 12.4142 7.5 12V10.5ZM6.75 15C7.16421 15 7.5 15.3358 7.5 15.75V17.25C7.5 17.6642 7.16421 18 6.75 18C6.33579 18 6 17.6642 6 17.25V15.75C6 15.3358 6.33579 15 6.75 15ZM10.5 15.75C10.5 15.3358 10.1642 15 9.75 15C9.33579 15 9 15.3358 9 15.75V17.25C9 17.6642 9.33579 18 9.75 18C10.1642 18 10.5 17.6642 10.5 17.25V15.75Z"
       />
     </Icon>
-  );
-}
+  )
+);