fix(icon): Use stable function for getting title id

package.json

@@ -67,5 +67,6 @@
     "prettier": "3.3.3",
     "typescript": "^5.5.4"
   },
-  "browserslist": "last 2 Chrome versions, last 2 firefox versions, last 2 safari versions, last 2 edge versions, not dead"
+  "browserslist": "last 2 Chrome versions, last 2 firefox versions, last 2 safari versions, last 2 edge versions, not dead",
+  "packageManager": "[email protected]+sha1.8bfdb6d72b4d5fdf87d21d27f2bfbe2b21dd2629"
 }

packages/eds-core-react/src/components/Icon/Icon.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, Ref, SVGProps } from 'react'
 import type { IconData } from '@equinor/eds-icons'
+import { useId } from '@equinor/eds-utils'
+import { Ref, SVGProps, forwardRef } from 'react'
 import styled from 'styled-components'
 import type { Name } from './Icon.types'
 import { get } from './library'
@@ -47,21 +48,16 @@ const StyledPath = styled.path.attrs<PathProps>(({ $height, $size }) => ({
   transform: $size / $height !== 1 ? `scale(${$size / $height})` : null,
 }))``
 
-const customIcon = (icon: IconData) => ({
-  icon,
-  count: Math.floor(Math.random() * 1000),
-})
-
 const findIcon = (name: string, data: IconData, size: number) => {
   // eslint-disable-next-line prefer-const
-  let { icon, count } = data ? customIcon(data) : get(name)
+  const icon = data ?? get(name)
 
   if (size < 24) {
     // fallback to normal icon if small is not made yet
-    icon = icon.sizes?.small || icon
+    return icon.sizes?.small || icon
   }
 
-  return { icon, count }
+  return icon
 }
 
 export type IconProps = (
@@ -105,7 +101,7 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   ref,
 ) {
   // eslint-disable-next-line prefer-const
-  const { icon, count } = findIcon(name, data, size)
+  const icon = findIcon(name, data, size)
 
   if (typeof icon === 'undefined') {
     throw Error(
@@ -132,10 +128,8 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   }
 
   // Accessibility
-  let titleId = ''
-
+  const titleId = useId(`${icon.prefix}-${icon.name}`)
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`
     svgProps = {
       ...svgProps,
       title,

packages/eds-core-react/src/components/Icon/Icon.types.tsx

@@ -1,9 +1,7 @@
-import type { IconData, IconName } from '@equinor/eds-icons'
+import type { IconName } from '@equinor/eds-icons'
 import { Icon } from './Icon'
 import { add } from './library'
 
-export type IconBasket = { icon?: IconData; count: number }
-
 export type Name = IconName
 
 export type IconType = typeof Icon & {

packages/eds-core-react/src/components/Icon/library.ts

@@ -1,10 +1,9 @@
 import type { IconData } from '@equinor/eds-icons'
-import type { IconBasket, Name } from './Icon.types'
+import type { Name } from './Icon.types'
 
 type IconRecord = Record<Name, IconData>
 
 let _icons: IconRecord = {}
-let count = 0
 /** Add icons to library to be used for rendering using name.
 This needs to be done lonly once */
 export const add = (icons: IconRecord): void => {
@@ -14,7 +13,6 @@ export const add = (icons: IconRecord): void => {
   }
 }
 
-export const get = (name: Name): IconBasket => {
-  count += 1
-  return { icon: _icons[name], count }
+export const get = (name: Name): IconData | undefined => {
+  return _icons[name]
 }