@oslokommune/punkt-react 16.17.4 → 16.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.17.4",
+  "version": "16.19.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.17.3",
+    "@oslokommune/punkt-elements": "^16.19.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.16.1",
-    "@oslokommune/punkt-css": "^16.17.2",
+    "@oslokommune/punkt-css": "^16.18.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "28b1f5b48d08a18a1b237b2220f9f1f1e88a5b7f"
+  "gitHead": "e90194e9a4c25a6b7a5370c05889e262b4e6cfb0"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-import { fireEvent,render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { vi } from 'vitest'
 import { createRef } from 'react'
@@ -181,12 +181,13 @@ describe('PktAccordionItem', () => {
       </PktAccordionItem>,
     )
 
-    await window.customElements.whenDefined('pkt-icon')
-    const icon = container.querySelector('pkt-icon')
+    const icon = container.querySelector('.pkt-icon')
     expect(icon).toBeInTheDocument()
     expect(icon).toHaveAttribute('name', 'chevron-thin-down')
     expect(icon).toHaveClass('pkt-accordion-item__icon')
-    expect(icon).toHaveAttribute('aria-hidden', 'true')
+    await waitFor(() =>
+      expect(icon?.querySelector('svg')).toHaveAttribute('aria-hidden', 'true'),
+    )
   })
 })
 

package/src/components/alert/Alert.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames'
 import { FC, HTMLAttributes, ReactElement, ReactNode, useCallback, useState } from 'react'
 import type { TAlertRole, TAlertSkin,TAriaLive } from 'shared-types'
 
-import { PktButton, PktIcon } from '..'
+import { PktButton } from '../button/Button'
+import { PktIcon } from '../icon/Icon'
 
 export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   skin?: TAlertSkin

package/src/components/button/Button.test.tsx

@@ -141,7 +141,7 @@ describe('PktButton icon paths', () => {
     )
 
     const icon = document.querySelector('.pkt-btn__icon:not(.pkt-btn__spinner)') as HTMLElement & { path?: string }
-    expect(icon?.path).toBe(customPath)
+    expect(icon?.dataset.path).toBe(customPath)
   })
 
   test('does not set path property when iconPath is not provided', () => {
@@ -153,7 +153,7 @@ describe('PktButton icon paths', () => {
 
     const icon = document.querySelector('.pkt-btn__icon:not(.pkt-btn__spinner)') as HTMLElement & { path?: string }
     // When not provided, path uses PktIcon's default
-    expect(icon?.path).toBe('https://punkt-cdn.oslo.kommune.no/latest/icons/')
+    expect(icon?.dataset.path).toBe('https://punkt-cdn.oslo.kommune.no/latest/icons/')
   })
 
   test('passes secondIconPath to second PktIcon when provided', () => {
@@ -168,7 +168,7 @@ describe('PktButton icon paths', () => {
       HTMLElement & { path?: string }
     >
     expect(icons).toHaveLength(2)
-    expect(icons[1]?.path).toBe(customPath)
+    expect(icons[1]?.dataset.path).toBe(customPath)
   })
 
   test('handles both iconPath and secondIconPath independently', () => {
@@ -190,7 +190,7 @@ describe('PktButton icon paths', () => {
       HTMLElement & { path?: string }
     >
     expect(icons).toHaveLength(2)
-    expect(icons[0]?.path).toBe(iconPath)
-    expect(icons[1]?.path).toBe(secondIconPath)
+    expect(icons[0]?.dataset.path).toBe(iconPath)
+    expect(icons[1]?.dataset.path).toBe(secondIconPath)
   })
 })

package/src/components/fileupload/DropZone.tsx

@@ -14,7 +14,7 @@ import {
 
 import { defaultFileUploadStrings } from 'shared-types'
 
-import { PktIcon } from '..'
+import { PktIcon } from '../icon/Icon'
 import { FileItem, TFileItemList, TUploadStrategy } from './types'
 
 /**

package/src/components/fileupload/QueueItemContent.tsx

@@ -6,7 +6,7 @@ import {
   type TProgressState,
 } from 'shared-utils/fileupload'
 
-import { PktIcon } from '..'
+import { PktIcon } from '../icon/Icon'
 import { OperationButton, TransferError, TransferInProgress } from './Subcomponents'
 import {
   TFileAndTransfer,

package/src/components/fileupload/Subcomponents.tsx

@@ -2,7 +2,9 @@ import { RefObject, useEffect, useState } from 'react'
 
 import { getDisplayFilename, trapTabInside } from 'shared-utils/fileupload'
 
-import { PktButton, PktIcon, PktProgressbar } from '..'
+import { PktButton } from '../button/Button'
+import { PktIcon } from '../icon/Icon'
+import { PktProgressbar } from '../progressbar/Progressbar'
 import { PktModal } from '../modal/Modal'
 import { Truncate } from './Truncate'
 import { TFileAndTransfer, TQueueItemOperation, TQueueOperationContext, TTransferItemInProgress } from './types'

package/src/components/header-menu/HeaderMenu.test.tsx

@@ -81,8 +81,7 @@ describe('PktHeaderMenu rendering', () => {
 
   test('maps ODS icon names on service links', async () => {
     const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
-    await window.customElements.whenDefined('pkt-icon')
-    const icons = container.querySelectorAll<HTMLElement>('.pkt-header-menu__service-icon')
+const icons = container.querySelectorAll<HTMLElement>('.pkt-header-menu__service-icon')
     await waitFor(() => expect(icons[0]).toHaveAttribute('name', '24h'))
     expect(icons[1]).toHaveAttribute('name', 'shield-fire')
     // Unmapped passes through
@@ -123,15 +122,14 @@ describe('PktHeaderMenu rendering', () => {
 
   test('renders social links with derived aria-labels and icons', async () => {
     const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
-    await window.customElements.whenDefined('pkt-icon')
-    const social = container.querySelectorAll<HTMLElement>('.pkt-header-menu__social-link')
+const social = container.querySelectorAll<HTMLElement>('.pkt-header-menu__social-link')
     expect(social).toHaveLength(2)
     expect(social[0]).toHaveAttribute('aria-label', 'Facebook')
     expect(social[1]).toHaveAttribute('aria-label', 'LinkedIn')
     await waitFor(() =>
-      expect(social[0].querySelector('pkt-icon')).toHaveAttribute('name', 'facebook'),
+      expect(social[0].querySelector('.pkt-icon')).toHaveAttribute('name', 'facebook'),
     )
-    expect(social[1].querySelector('pkt-icon')).toHaveAttribute('name', 'linkedin')
+    expect(social[1].querySelector('.pkt-icon')).toHaveAttribute('name', 'linkedin')
   })
 
   test('calls onDataLoaded with the supplied payload', async () => {

package/src/components/heading/Heading.test.tsx

@@ -1,20 +1,19 @@
 import '@testing-library/jest-dom'
 
-import { render, screen, waitFor } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { createRef } from 'react'
 
 import { PktHeading } from './Heading'
 
 expect.extend(toHaveNoViolations)
 
 describe('PktHeading', () => {
-  test('renders without errors', async () => {
-    render(<PktHeading />)
-    await window.customElements.whenDefined('pkt-heading')
+  test('renders without errors', () => {
+    const { container } = render(<PktHeading />)
+    expect(container.querySelector('h2')).toBeInTheDocument()
   })
 
-  test('renders with different levels', async () => {
+  test('renders with different levels', () => {
     const { container } = render(
       <>
         <PktHeading level={1}>Heading 1</PktHeading>
@@ -22,39 +21,41 @@ describe('PktHeading', () => {
         <PktHeading level={3}>Heading 3</PktHeading>
       </>,
     )
-    await window.customElements.whenDefined('pkt-heading')
 
-    const headings = container.querySelectorAll('pkt-heading')
-    expect(headings[0]).toHaveAttribute('aria-level', '1')
-    expect(headings[1]).toHaveAttribute('aria-level', '2')
-    expect(headings[2]).toHaveAttribute('aria-level', '3')
+    expect(container.querySelector('h1')).toHaveTextContent('Heading 1')
+    expect(container.querySelector('h2')).toHaveTextContent('Heading 2')
+    expect(container.querySelector('h3')).toHaveTextContent('Heading 3')
   })
 
-  test('renders with different sizes', async () => {
-    const ref = createRef<any>()
+  test('applies default size class based on level', () => {
+    const { container } = render(<PktHeading level={1}>Heading</PktHeading>)
+    expect(container.querySelector('h1')).toHaveClass('pkt-heading--xlarge')
+  })
+
+  test('renders with explicit size', () => {
     const { container } = render(<PktHeading size="xlarge">Large Heading</PktHeading>)
-    await window.customElements.whenDefined('pkt-heading')
+    const heading = container.querySelector('h2')
+    expect(heading).toHaveClass('pkt-heading--xlarge')
+  })
 
-    const headingElement = container.querySelector('pkt-heading')
-    expect(headingElement).toHaveClass('pkt-heading--xlarge')
-    expect(headingElement).toHaveAttribute('size', 'xlarge')
+  test('renders with explicit weight', () => {
+    const { container } = render(<PktHeading weight="bold">Bold Heading</PktHeading>)
+    expect(container.querySelector('h2')).toHaveClass('pkt-heading--fw-bold')
   })
 
-  test('renders with visually hidden prop', async () => {
+  test('renders with visually hidden prop', () => {
     const { container } = render(<PktHeading visuallyHidden>Hidden Heading</PktHeading>)
-    await window.customElements.whenDefined('pkt-heading')
-
-    const headingElement = container.querySelector('pkt-heading')
-    expect(headingElement).toHaveClass('pkt-sr-only')
-    expect(headingElement).toHaveAttribute('visuallyHidden')
+    expect(container.querySelector('h2')).toHaveClass('pkt-sr-only')
   })
 
-  test('renders with align props', async () => {
+  test('renders with align prop', () => {
     const { container } = render(<PktHeading align="center">Center Heading</PktHeading>)
-    await window.customElements.whenDefined('pkt-heading')
+    expect(container.querySelector('h2')).toHaveClass('pkt-heading--center')
+  })
 
-    const headingElement = container.querySelector('pkt-heading')
-    expect(headingElement).toHaveAttribute('align', 'center')
+  test('always carries the pkt-heading base class', () => {
+    const { container } = render(<PktHeading>Heading</PktHeading>)
+    expect(container.querySelector('h2')).toHaveClass('pkt-heading')
   })
 
   describe('accessibility', () => {
@@ -64,7 +65,6 @@ describe('PktHeading', () => {
           Accessible Heading
         </PktHeading>,
       )
-      await window.customElements.whenDefined('pkt-heading')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/heading/Heading.tsx

@@ -1,29 +1,77 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { IPktHeading as IPktElHeading, PktHeading as PktElHeading } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC, forwardRef, ForwardRefExoticComponent, type LegacyRef, type ReactNode } from 'react'
+import classNames from 'classnames'
+import { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import type { THeadingLevel, THeadingSize, THeadingWeight } from 'shared-types'
 
-import { PktElConstructor } from '@/interfaces/IPktElements'
+export type TPktHeadingLevel = THeadingLevel
+export type TPktHeadingSize = THeadingSize
+export type TPktHeadingWeight = THeadingWeight
 
-export interface IPktHeading extends IPktElHeading {
-  children?: ReactNode | ReactNode[]
-  ref?: LegacyRef<HTMLElement>
+export interface IPktHeading extends HTMLAttributes<HTMLHeadingElement> {
+  size?: TPktHeadingSize
+  level?: TPktHeadingLevel
+  weight?: TPktHeadingWeight
+  visuallyHidden?: boolean
+  align?: 'start' | 'center' | 'end'
+  children?: ReactNode
 }
 
-const LitComponent: FC<IPktHeading> = createComponent({
-  tagName: 'pkt-heading',
-  elementClass: PktElHeading as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktHeading',
-}) as ForwardRefExoticComponent<IPktHeading>
+const defaultSizeForLevel = (level: TPktHeadingLevel): TPktHeadingSize => {
+  switch (level) {
+    case 1:
+      return 'xlarge'
+    case 2:
+      return 'large'
+    case 3:
+      return 'medium'
+    case 4:
+      return 'small'
+    case 5:
+    case 6:
+      return 'xsmall'
+    default:
+      return 'medium'
+  }
+}
+
+const defaultWeightForLevel = (level: TPktHeadingLevel): TPktHeadingWeight => {
+  switch (level) {
+    case 1:
+    case 2:
+      return 'regular'
+    case 3:
+    case 4:
+    case 5:
+    case 6:
+      return 'medium'
+    default:
+      return 'medium'
+  }
+}
+
+export const PktHeading = forwardRef<HTMLHeadingElement, IPktHeading>(function PktHeading(
+  { level = 2, size, weight, visuallyHidden, align, className, children, ...rest },
+  ref,
+) {
+  const effectiveSize = size ?? defaultSizeForLevel(level)
+  const effectiveWeight = weight ?? defaultWeightForLevel(level)
+
+  const classes = classNames(
+    'pkt-heading',
+    `pkt-heading--${effectiveSize}`,
+    `pkt-heading--fw-${effectiveWeight}`,
+    align && `pkt-heading--${align}`,
+    visuallyHidden && 'pkt-sr-only',
+    className,
+  )
+
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
-export const PktHeading: FC<IPktHeading> = forwardRef(({ children, ...props }: IPktHeading, ref) => {
   return (
-    <LitComponent data-testid="pkt-heading" {...props} ref={ref}>
+    <Tag {...rest} ref={ref} className={classes} data-testid="pkt-heading">
       {children}
-    </LitComponent>
+    </Tag>
   )
 })
 

package/src/components/icon/Icon.test.tsx

@@ -21,11 +21,11 @@ describe('PktIcon', () => {
   describe('with default fetcher', () => {
     test('fetches SVG with default fetcher', async () => {
       await render(<PktIcon name="arrow" />)
-      await window.customElements.whenDefined('pkt-icon')
 
-      const icon = await screen.findByRole('img')
+      const icon = await screen.findByTestId('icon')
       expect(icon).toMatchInlineSnapshot(`
         <svg
+          aria-hidden="true"
           data-filename="stiarrow.svg"
           data-testid="icon"
           role="img"
@@ -43,7 +43,6 @@ describe('PktIcon', () => {
           <PktIcon name={'some-icon'} />
         </div>,
       )
-      await window.customElements.whenDefined('pkt-icon')
 
       await waitFor(async () => {
         const icons = await screen.findAllByTestId('icon')
@@ -51,4 +50,70 @@ describe('PktIcon', () => {
       })
     })
   })
+
+  describe('aria-hidden', () => {
+    test('defaults to true on the SVG', async () => {
+      await render(<PktIcon name="arrow" />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-hidden', 'true')
+      expect(svg).not.toHaveAttribute('aria-label')
+    })
+
+    test('ariaHidden={false} sets aria-hidden="false" and aria-label fallback to name', async () => {
+      await render(<PktIcon name="arrow" ariaHidden={false} />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-hidden', 'false')
+      expect(svg).toHaveAttribute('aria-label', 'arrow')
+    })
+
+    test('ariaHidden="false" string is treated as boolean false', async () => {
+      await render(<PktIcon name="arrow" ariaHidden="false" />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-hidden', 'false')
+    })
+
+    test('ariaHidden="true" string is treated as boolean true', async () => {
+      await render(<PktIcon name="arrow" ariaHidden="true" />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    test('back-compat: aria-hidden kebab attribute still routes to the SVG', async () => {
+      const { container } = await render(<PktIcon name="arrow" aria-hidden={false} />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-hidden', 'false')
+      // Wrapper span itself should not carry aria-hidden
+      expect(container.querySelector('.pkt-icon')).not.toHaveAttribute('aria-hidden')
+    })
+  })
+
+  describe('aria-label', () => {
+    test('ariaLabel alone makes aria-hidden default to false', async () => {
+      await render(<PktIcon name="arrow" ariaLabel="Gå til forsiden" />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-hidden', 'false')
+      expect(svg).toHaveAttribute('aria-label', 'Gå til forsiden')
+    })
+
+    test('ariaLabel + ariaHidden={true} keeps aria-hidden="true" and omits aria-label', async () => {
+      await render(<PktIcon name="arrow" ariaLabel="Lukk" ariaHidden={true} />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-hidden', 'true')
+      expect(svg).not.toHaveAttribute('aria-label')
+    })
+
+    test('ariaHidden={false} without ariaLabel falls back to the icon name', async () => {
+      await render(<PktIcon name="chevron-right" ariaHidden={false} />)
+      const svg = await screen.findByTestId('icon')
+
+      expect(svg).toHaveAttribute('aria-label', 'chevron-right')
+    })
+  })
 })

package/src/components/icon/Icon.tsx

@@ -1,23 +1,182 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { PktIcon as PktEl } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC } from 'react'
+import classNames from 'classnames'
+import {
+  forwardRef,
+  HTMLAttributes,
+  MutableRefObject,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from 'react'
 import type { Booleanish } from 'shared-types'
 
-import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
+const defaultPath = 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
 
-interface IPktIcon extends PktElType {
+if (typeof window !== 'undefined') {
+  window.pktFetch =
+    window.pktFetch === undefined ? (fetch as unknown as typeof window.pktFetch) : window.pktFetch
+  window.pktIconPath = window.pktIconPath || defaultPath
+}
+
+const errorSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>'
+const dlCache: { [key: string]: Promise<string> } = {}
+const MAX_RETRIES = 2
+const RETRY_DELAY = 1500
+
+const isSessionStorageAvailable =
+  typeof Storage !== 'undefined' && typeof sessionStorage !== 'undefined'
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+const getCachedIconSync = (name: string, path: string | undefined): string => {
+  if (!name || !isSessionStorageAvailable) return ''
+  return sessionStorage.getItem(path + name + '.svg') ?? ''
+}
+
+const fetchIcon = (url: string): Promise<string> =>
+  (window.pktFetch as unknown as typeof fetch)(url).then((response) => {
+    if (!response.ok) {
+      throw new Error('Missing icon: ' + url)
+    }
+    return response.text()
+  })
+
+const fetchIconWithRetry = async (url: string, retries = MAX_RETRIES): Promise<string> => {
+  try {
+    return await fetchIcon(url)
+  } catch (error) {
+    if (retries > 0) {
+      await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY))
+      return fetchIconWithRetry(url, retries - 1)
+    }
+    // eslint-disable-next-line no-console
+    console.error('Failed to fetch icon: ' + url)
+    return errorSvg
+  }
+}
+
+const downloadIconOrGetFromCache = async (
+  name: string,
+  path: string | undefined,
+): Promise<string | null> => {
+  const key = path + name + '.svg'
+
+  if (isSessionStorageAvailable && sessionStorage.getItem(key)) {
+    return sessionStorage.getItem(key)
+  }
+
+  if (key in dlCache) {
+    return dlCache[key]
+  }
+
+  if (typeof window !== 'undefined' && typeof window.pktFetch === 'function') {
+    dlCache[key] = fetchIconWithRetry(key).then((text) => {
+      if (text !== errorSvg && isSessionStorageAvailable) {
+        sessionStorage.setItem(key, text)
+      }
+      delete dlCache[key]
+      return text
+    })
+    return dlCache[key]
+  }
+  return errorSvg
+}
+
+interface IPktIcon extends HTMLAttributes<HTMLElement> {
   name?: string
   path?: string
-  'aria-hidden'?: Booleanish | undefined
+  ariaHidden?: Booleanish
+  ariaLabel?: string
+}
+
+const toBoolean = (v: Booleanish | undefined): boolean | undefined => {
+  if (v === undefined) return undefined
+  return v === true || v === 'true'
 }
 
-export const PktIcon: FC<IPktIcon> = createComponent({
-  tagName: 'pkt-icon',
-  elementClass: PktEl as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktIcon',
-  events: {},
+export const PktIcon = forwardRef<HTMLSpanElement, IPktIcon>(function PktIcon(
+  {
+    name = '',
+    path,
+    className,
+    ariaHidden,
+    ariaLabel,
+    'aria-hidden': ariaHiddenAttr,
+    'aria-label': ariaLabelAttr,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const resolvedPath =
+    path ?? (typeof window !== 'undefined' ? window.pktIconPath : defaultPath)
+  const elementRef = useRef<HTMLSpanElement | null>(null)
+
+  const explicitAriaHidden = toBoolean(ariaHidden) ?? toBoolean(ariaHiddenAttr)
+  const explicitAriaLabel = ariaLabel ?? ariaLabelAttr
+  const effectiveAriaHidden =
+    explicitAriaHidden !== undefined ? explicitAriaHidden : !explicitAriaLabel
+  const effectiveAriaLabel = effectiveAriaHidden ? undefined : explicitAriaLabel || name
+
+  useIsomorphicLayoutEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+
+    const applyAria = (root: HTMLElement) => {
+      const svg = root.querySelector('svg')
+      if (!svg) return
+      svg.setAttribute('aria-hidden', String(effectiveAriaHidden))
+      if (effectiveAriaLabel) {
+        svg.setAttribute('aria-label', effectiveAriaLabel)
+      } else {
+        svg.removeAttribute('aria-label')
+      }
+    }
+
+    if (!name) {
+      el.innerHTML = ''
+      return
+    }
+
+    const cached = getCachedIconSync(name, resolvedPath)
+    if (cached) {
+      el.innerHTML = cached
+      applyAria(el)
+      return
+    }
+
+    let cancelled = false
+    downloadIconOrGetFromCache(name, resolvedPath).then((text) => {
+      if (cancelled) return
+      const current = elementRef.current
+      if (current) {
+        current.innerHTML = text || errorSvg
+        applyAria(current)
+      }
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [name, resolvedPath, effectiveAriaHidden, effectiveAriaLabel])
+
+  const setRef = (el: HTMLSpanElement | null) => {
+    elementRef.current = el
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(el)
+    } else if (forwardedRef) {
+      ;(forwardedRef as MutableRefObject<HTMLSpanElement | null>).current = el
+    }
+  }
+
+  return (
+    <span
+      {...rest}
+      ref={setRef}
+      className={classNames('pkt-icon', className)}
+      {...(name ? { name } : {})}
+      data-path={resolvedPath}
+    />
+  )
 })
+
+PktIcon.displayName = 'PktIcon'

package/src/components/link/Link.tsx

@@ -3,7 +3,7 @@
 import classNames from 'classnames'
 import { FC, LinkHTMLAttributes } from 'react'
 
-import { PktIcon } from '..'
+import { PktIcon } from '../icon/Icon'
 
 interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
   href?: string