@coopdigital/react 0.17.0 → 0.18.0

package/README.md

@@ -33,8 +33,8 @@ npm install @coopdigital/react @coopdigital/styles
 Import the components that you need, along with the main stylesheet and the corresponding component styles:
 ```
 import { Pill } from "@coopdigital/react"
-import "@coopdigital/styles/dist/main.css"
-import "@coopdigital/styles/dist/components/Pill.css"
+import "@coopdigital/styles/main.css"
+import "@coopdigital/styles/components/Pill.css"
 ```
 
 Alternatively if your project uses SASS you can import the source stylesheets:

package/dist/components/Icon/AddIcon.d.ts

@@ -1 +1,6 @@
-export declare const AddIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const AddIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ArrowDownIcon.d.ts

@@ -1 +1,6 @@
-export declare const ArrowDownIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ArrowDownIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ArrowLeftIcon.d.ts

@@ -1 +1,6 @@
-export declare const ArrowLeftIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ArrowLeftIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ArrowRightIcon.d.ts

@@ -1 +1,6 @@
-export declare const ArrowRightIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ArrowRightIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ArrowUpIcon.d.ts

@@ -1 +1,6 @@
-export declare const ArrowUpIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ArrowUpIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/AvatarAltIcon.d.ts

@@ -1 +1,6 @@
-export declare const AvatarAltIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const AvatarAltIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/AvatarIcon.d.ts

@@ -1 +1,6 @@
-export declare const AvatarIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const AvatarIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/BasketIcon.d.ts

@@ -1 +1,6 @@
-export declare const BasketIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const BasketIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/CalendarIcon.d.ts

@@ -1 +1,6 @@
-export declare const CalendarIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const CalendarIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ChevronDownIcon.d.ts

@@ -1 +1,6 @@
-export declare const ChevronDownIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ChevronDownIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ChevronLeftIcon.d.ts

@@ -1 +1,6 @@
-export declare const ChevronLeftIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ChevronLeftIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ChevronRightIcon.d.ts

@@ -1 +1,6 @@
-export declare const ChevronRightIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ChevronRightIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ChevronUpIcon.d.ts

@@ -1 +1,6 @@
-export declare const ChevronUpIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ChevronUpIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ClockIcon.d.ts

@@ -1 +1,6 @@
-export declare const ClockIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ClockIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/CloseAltIcon.d.ts

@@ -1 +1,6 @@
-export declare const CloseAltIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const CloseAltIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/CloseIcon.d.ts

@@ -1 +1,6 @@
-export declare const CloseIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const CloseIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/CoopCardIcon.d.ts

@@ -1 +1,6 @@
-export declare const CoopCardIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const CoopCardIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/CoopIcon.d.ts

@@ -1 +1,6 @@
-export declare const CoopIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const CoopIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/CoopLocationIcon.d.ts

@@ -1 +1,6 @@
-export declare const CoopLocationIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const CoopLocationIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/DownloadIcon.d.ts

@@ -1 +1,6 @@
-export declare const DownloadIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const DownloadIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/HomeIcon.d.ts

@@ -1 +1,6 @@
-export declare const HomeIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const HomeIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/InformationIcon.d.ts

@@ -1 +1,6 @@
-export declare const InformationIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const InformationIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/LocationIcon.d.ts

@@ -1 +1,6 @@
-export declare const LocationIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const LocationIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/MailIcon.d.ts

@@ -1 +1,6 @@
-export declare const MailIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const MailIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/MenuIcon.d.ts

@@ -1 +1,6 @@
-export declare const MenuIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const MenuIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/MessageIcon.d.ts

@@ -1 +1,6 @@
-export declare const MessageIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const MessageIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/MinusIcon.d.ts

@@ -1 +1,6 @@
-export declare const MinusIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const MinusIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/OpenNewIcon.d.ts

@@ -1 +1,6 @@
-export declare const OpenNewIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const OpenNewIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/PencilIcon.d.ts

@@ -1 +1,6 @@
-export declare const PencilIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const PencilIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/PhoneIcon.d.ts

@@ -1 +1,6 @@
-export declare const PhoneIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const PhoneIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/QuestionIcon.d.ts

@@ -1 +1,6 @@
-export declare const QuestionIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const QuestionIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/ScooterIcon.d.ts

@@ -1 +1,6 @@
-export declare const ScooterIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const ScooterIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/SearchIcon.d.ts

@@ -1 +1,6 @@
-export declare const SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const SearchIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/SettingsIcon.d.ts

@@ -1 +1,6 @@
-export declare const SettingsIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const SettingsIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/TickAltIcon.d.ts

@@ -1 +1,6 @@
-export declare const TickAltIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const TickAltIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/TickIcon.d.ts

@@ -1 +1,6 @@
-export declare const TickIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const TickIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/VanIcon.d.ts

@@ -1 +1,6 @@
-export declare const VanIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const VanIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/WarningIcon.d.ts

@@ -1 +1,6 @@
-export declare const WarningIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const WarningIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/WriteIcon.d.ts

@@ -1 +1,6 @@
-export declare const WriteIcon: () => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const WriteIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,6 +34,7 @@
     "test:e2e:ui": "npx playwright test --ui",
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
+    "build:icons": "tsx scripts build-icons",
     "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "storybook": "storybook dev -p 6006",
     "storybook:playwright": "storybook dev -p 9000",
@@ -44,7 +45,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.15.1",
+    "@coopdigital/styles": "^0.15.2",
     "@playwright/test": "^1.51.1",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -66,5 +67,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "4a24650f72c010d21c1fccac53e6de59ec7c3e6e"
+  "gitHead": "0fa78c25e19ac1c1dc6af564c570e94646e71bc4"
 }

package/src/components/Icon/AddIcon.tsx

@@ -1,6 +1,22 @@
-export const AddIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AddIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M24.7 16.72a1 1 0 0 1-.7.28H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.72"
         fill="currentColor"

package/src/components/Icon/ArrowDownIcon.tsx

@@ -1,6 +1,22 @@
-export const ArrowDownIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowDownIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path d="M15 28.66V3a1 1 0 0 1 2 0v25.66a1 1 0 0 1-2 0" fill="currentColor" />
       <path
         d="M3 17a1 1 0 0 1 .29-.71 1 1 0 0 1 1.42 0L16 27.58l11.29-11.29a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41l-12 12a1 1 0 0 1-1.41 0l-12-12A1 1 0 0 1 3 17"

package/src/components/Icon/ArrowLeftIcon.tsx

@@ -1,6 +1,22 @@
-export const ArrowLeftIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowLeftIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path d="M3.34 17H29a1 1 0 0 0 0-2H3.34a1 1 0 0 0 0 2" fill="currentColor" />
       <path
         d="M15 29a1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.42L5.12 16.71a1 1 0 0 1 0-1.42L15.71 4.71a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41 0l-12 12a1 1 0 0 0 0 1.42l12 12a1 1 0 0 0 .7.29"

package/src/components/Icon/ArrowRightIcon.tsx

@@ -1,6 +1,22 @@
-export const ArrowRightIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowRightIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path d="M28.7 15H3a1 1 0 0 0 0 2h25.7a1 1 0 0 0 0-2" fill="currentColor" />
       <path
         d="M17 3a1 1 0 0 0-.7.3 1 1 0 0 0 0 1.4l10.6 10.6a1 1 0 0 1 0 1.4L16.3 27.3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l12-12a1 1 0 0 0 0-1.4l-12-12A1 1 0 0 0 17 3"

package/src/components/Icon/ArrowUpIcon.tsx

@@ -1,6 +1,22 @@
-export const ArrowUpIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ArrowUpIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path d="M17 3.34V29a1 1 0 0 1-2 0V3.34a1 1 0 0 1 2 0" fill="currentColor" />
       <path
         d="M29 15a1 1 0 0 1-.29.71 1 1 0 0 1-1.42 0L16 4.42 4.71 15.71a1 1 0 0 1-1.42 0 1 1 0 0 1 0-1.41l12-12a1 1 0 0 1 1.41 0l12 12a1 1 0 0 1 .3.7"

package/src/components/Icon/AvatarAltIcon.tsx

@@ -1,6 +1,22 @@
-export const AvatarAltIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AvatarAltIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 32a16 16 0 1 1 16-16 16 16 0 0 1-16 16m0-30a14 14 0 1 0 14 14A14 14 0 0 0 16 2"
         fill="currentColor"

package/src/components/Icon/AvatarIcon.tsx

@@ -1,6 +1,22 @@
-export const AvatarIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AvatarIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 31a18.24 18.24 0 0 1-12.64-5.1A1.19 1.19 0 0 1 3 24.86a12.31 12.31 0 0 1 12-10h2a12.31 12.31 0 0 1 12 10 1.19 1.19 0 0 1-.34 1.06A18.24 18.24 0 0 1 16 31M5.42 24.68a15.9 15.9 0 0 0 21.16 0A10 10 0 0 0 17 17.17h-2a10 10 0 0 0-9.58 7.51"
         fill="currentColor"

package/src/components/Icon/BasketIcon.tsx

@@ -1,6 +1,22 @@
-export const BasketIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const BasketIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16.07 26a1 1 0 0 0 1-1v-4.08a1 1 0 1 0-2 0V25a1 1 0 0 0 1 1M21.5 26h.17a1 1 0 0 0 1-.85l.68-4.07a1 1 0 0 0-.82-1.18 1 1 0 0 0-1.16.84l-.67 4.07a1 1 0 0 0 .8 1.19M10.43 26h.17a1 1 0 0 0 .82-1.18l-.68-4.07a1 1 0 0 0-1.15-.84 1 1 0 0 0-.82 1.18l.67 4.07a1 1 0 0 0 .99.84"
         fill="currentColor"