@simplybusiness/mobius 4.7.0 → 4.8.0

package/src/components/Icon/Icon.tsx

@@ -3,6 +3,9 @@ import { IconProps } from "./types";
 
 const ICON_PREFIX = "mobius-icon";
 
+const capitaliseFirstLetter = (str: string) =>
+  str.charAt(0).toUpperCase() + str.slice(1);
+
 export function Icon({
   icon,
   className,
@@ -11,6 +14,7 @@ export function Icon({
   fixedWidth,
   spin,
   spinReverse,
+  title,
   ...otherProps
 }: IconProps) {
   if (!icon) {
@@ -31,6 +35,10 @@ export function Icon({
   );
 
   const { iconName, width, height, svgPathData } = icon;
+  const formattedIconName = iconName.split("-").join(" ");
+
+  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
+  const titleText = title || defaultTitle;
 
   return (
     <svg
@@ -44,6 +52,7 @@ export function Icon({
       style={{ color }}
       {...otherProps}
     >
+      <title>{titleText}</title>
       <path fill="currentColor" d={svgPathData} />
     </svg>
   );

package/src/components/Icon/types.ts

@@ -9,6 +9,7 @@ export interface IconProps {
   size?: IconSizeProp;
   color?: string;
   fixedWidth?: boolean;
+  title?: string;
 
   // Animations
   spin?: boolean;