feat: add SessionLucideIconButton and bump lucide font to 0.488.0

Author: Bilb

fonts/lucide.ttf

@@ -0,0 +1,26 @@
+import type { SessionDataTestId } from 'react';
+import styled from 'styled-components';
+
+const LucideIconWrapper = styled.div<{ iconColor?: string; iconSize: string }>`
+  font-family: var(--font-icon);
+  font-size: ${({ iconSize }) => iconSize};
+  color: ${({ iconColor }) => iconColor};
+`;
+
+export type LucideIconProps = {
+  unicode: string;
+  iconColor?: string;
+  iconSize: string;
+  dataTestId?: SessionDataTestId;
+};
+
+/**
+ * This is a wrapper around Lucide icons with unicode.
+ */
+export const LucideIcon = ({ unicode, iconColor, iconSize, dataTestId }: LucideIconProps) => {
+  return (
+    <LucideIconWrapper iconColor={iconColor} iconSize={iconSize} data-testid={dataTestId}>
+      {unicode}
+    </LucideIconWrapper>
+  );
+};

ts/components/icon/LucideIcon.tsx

@@ -3,6 +3,7 @@ import { KeyboardEvent, MouseEvent, SessionDataTestId, ReactNode, forwardRef, me
 import clsx from 'clsx';
 import styled from 'styled-components';
 import { SessionIcon, SessionIconProps } from './SessionIcon';
+import { LucideIcon, type LucideIconProps } from './LucideIcon';
 
 export type SessionIconButtonProps = SessionIconProps & {
   onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
@@ -128,3 +129,78 @@ const SessionIconButtonInner = forwardRef<HTMLButtonElement, SessionIconButtonPr
 );
 
 export const SessionIconButton = memo(SessionIconButtonInner, _.isEqual);
+
+export const SessionLucideIconButton = (
+  props: Pick<
+    SessionIconButtonProps,
+    | 'onClick'
+    | 'disabled'
+    | 'isSelected'
+    | 'margin'
+    | 'padding'
+    | 'ariaLabel'
+    | 'title'
+    | 'dataTestId'
+    | 'dataTestIdIcon'
+    | 'style'
+    | 'tabIndex'
+  > &
+    Pick<LucideIconProps, 'unicode' | 'iconSize' | 'iconColor'>
+) => {
+  const {
+    unicode,
+    iconSize,
+    isSelected: $isSelected,
+    margin,
+    padding,
+    ariaLabel,
+    title,
+    dataTestId,
+    dataTestIdIcon,
+    style,
+    iconColor,
+    tabIndex,
+    disabled,
+    onClick,
+  } = props;
+
+  const clickHandler = (e: MouseEvent<HTMLButtonElement>) => {
+    if (!disabled && onClick) {
+      e.stopPropagation();
+      onClick(e);
+    }
+  };
+  const keyPressHandler = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (e.currentTarget.tabIndex > -1 && e.key === 'Enter' && !disabled && onClick) {
+      e.stopPropagation();
+      onClick();
+    }
+  };
+
+  return (
+    <StyledSessionIconButton
+      color={iconColor}
+      $isSelected={$isSelected}
+      title={title}
+      aria-label={ariaLabel}
+      onClick={clickHandler}
+      style={{
+        ...style,
+        display: style?.display ? style.display : 'flex',
+        margin: margin || '',
+        padding: padding || '',
+      }}
+      tabIndex={tabIndex}
+      onKeyDown={keyPressHandler}
+      disabled={disabled}
+      data-testid={dataTestId}
+    >
+      <LucideIcon
+        unicode={unicode}
+        iconSize={iconSize}
+        iconColor={iconColor}
+        dataTestId={dataTestIdIcon}
+      />
+    </StyledSessionIconButton>
+  );
+};

ts/components/icon/SessionIconButton.tsx

@@ -1,11 +1,37 @@
+export enum LUCIDE_ICONS_UNICODE {
+  EXTERNAL_LINK_ICON = '',
+  COPY = '',
+  REPLY = '',
+  REFRESH_CW = '',
+  CIRCLE_ARROW_DOWN = '',
+  TRASH2 = '',
+  LOG_OUT = '',
+  AT_SIGN = '',
+  VOLUME_OFF = '',
+  VOLUME_2 = '',
+  BUG = '',
+  TIMER = '',
+  USER_ROUND = '',
+  USER_ROUND_PEN = '',
+  USER_ROUND_PLUS = '',
+  FILE = '',
+  PIN = '',
+  PIN_OFF = '',
+  BAN = '',
+  EYE_OFF = '',
+  USER_ROUND_X = '',
+  USER_ROUND_CHECK = '',
+  PENCIL = '',
+}
+
 /**
  * Used for rendering icons inside of the Localizer component
- * @note Current: Lucide v0.473.0
+ * @note Current: Lucide v0.488.0
  * @note The Lucide Icon font must be installed locally to see these icons.
  * @note Download from https://github.com/lucide-icons/lucide/releases
  */
 export const LUCIDE_INLINE_ICONS = {
-  EXTERNAL_LINK_ICON: "<span role='img' aria-label='external link icon'></span>",
+  EXTERNAL_LINK_ICON: `<span role='img' aria-label='external link icon'>${LUCIDE_ICONS_UNICODE.EXTERNAL_LINK_ICON}</span>`,
 };
 
 export type LucideInlineIconKeys = keyof typeof LUCIDE_INLINE_ICONS;