fix(nhsuk-frontend-react): remove Icon height and width props

rowellx68 · Nov 29, 2024 · dbf905d · dbf905d
1 parent 8565476
commit dbf905d
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 71 deletions.
diff --git a/.changeset/wet-birds-shop.md b/.changeset/wet-birds-shop.md
@@ -0,0 +1,5 @@
+---
+"nhsuk-frontend-react": patch
+---
+
+fix(nhsuk-frontend-react): remove Icon height and width props
diff --git a/packages/nhsuk-frontend-react/resource-transformer.cjs b/packages/nhsuk-frontend-react/resource-transformer.cjs
@@ -68,7 +68,10 @@ module.exports = (file, api, options) => {
           j.expressionStatement(
             j.assignmentExpression(
               '=',
-              j.memberExpression(j.thisExpression(), j.identifier('mobileMenu')),
+              j.memberExpression(
+                j.thisExpression(),
+                j.identifier('mobileMenu'),
+              ),
               j.identifier('existingMobileMenu'),
             ),
           ),

diff --git a/packages/nhsuk-frontend-react/src/icons/arrow-left/ArrowLeft.tsx b/packages/nhsuk-frontend-react/src/icons/arrow-left/ArrowLeft.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const ArrowLeftIcon = ({
-  width = 34,
-  height = 34,
-  className,
-  ...rest
-}: Icon) => {
+const ArrowLeftIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__arrow-left', className)}
       {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       aria-hidden="true"
-      width={width}
-      height={height}
+      width="34"
+      height="34"
     >
       <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
     </svg>

diff --git a/packages/nhsuk-frontend-react/src/icons/arrow-right-circle/ArrowRightCircle.tsx b/packages/nhsuk-frontend-react/src/icons/arrow-right-circle/ArrowRightCircle.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const ArrowRightCircleIcon = ({
-  width = 36,
-  height = 36,
-  className,
-  ...rest
-}: Icon) => {
+const ArrowRightCircleIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__arrow-right-circle', className)}
       {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       aria-hidden="true"
-      width={width}
-      height={height}
+      width="36"
+      height="36"
     >
       <path d="M0 0h24v24H0z" fill="none"></path>
       <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path>

diff --git a/packages/nhsuk-frontend-react/src/icons/arrow-right/ArrowRight.tsx b/packages/nhsuk-frontend-react/src/icons/arrow-right/ArrowRight.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const ArrowRightIcon = ({
-  width = 34,
-  height = 34,
-  className,
-  ...rest
-}: Icon) => {
+const ArrowRightIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__arrow-right', className)}
       {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       aria-hidden="true"
-      width={width}
-      height={height}
+      width="34"
+      height="34"
     >
       <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
     </svg>

diff --git a/packages/nhsuk-frontend-react/src/icons/chevron-left/ChevronLeft.tsx b/packages/nhsuk-frontend-react/src/icons/chevron-left/ChevronLeft.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 import type { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const ChevronLeftIcon = ({
-  width = 24,
-  height = 24,
-  className,
-  ...rest
-}: Icon) => {
+const ChevronLeftIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__chevron-left', className)}
+      {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       aria-hidden="true"
-      height={height}
-      width={width}
-      {...rest}
+      height="24"
+      width="24"
     >
       <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
     </svg>

diff --git a/packages/nhsuk-frontend-react/src/icons/chevron-right-circle/ChevronRightCircle.tsx b/packages/nhsuk-frontend-react/src/icons/chevron-right-circle/ChevronRightCircle.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const ChevronRightCircleIcon = ({
-  width = 27,
-  height = 27,
-  className,
-  ...rest
-}: Icon) => {
+const ChevronRightCircleIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__chevron-right-circle', className)}
+      {...rest}
       xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
       aria-hidden="true"
       focusable="false"
-      {...rest}
+      width="27"
+      height="27"
     >
       <circle cx="13.333" cy="13.333" r="13.333" fill="" />
       <g

diff --git a/packages/nhsuk-frontend-react/src/icons/chevron-right/ChevronRight.tsx b/packages/nhsuk-frontend-react/src/icons/chevron-right/ChevronRight.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const ChevronRightIcon = ({
-  className,
-  width = 34,
-  height = 34,
-  ...rest
-}: Icon) => {
+const ChevronRightIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__chevron-right', className)}
+      {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       aria-hidden="true"
-      width={width}
-      height={height}
-      {...rest}
+      width="34"
+      height="34"
     >
       <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
     </svg>

diff --git a/packages/nhsuk-frontend-react/src/icons/close/Close.tsx b/packages/nhsuk-frontend-react/src/icons/close/Close.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const CloseIcon = ({ width = 27, height = 27, className, ...rest }: Icon) => {
+const CloseIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__close', className)}
@@ -11,8 +11,8 @@ const CloseIcon = ({ width = 27, height = 27, className, ...rest }: Icon) => {
       viewBox="0 0 24 24"
       aria-hidden="true"
       focusable="false"
-      width={width}
-      height={height}
+      width="27"
+      height="27"
     >
       <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
     </svg>

diff --git a/packages/nhsuk-frontend-react/src/icons/cross/Cross.tsx b/packages/nhsuk-frontend-react/src/icons/cross/Cross.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const CrossIcon = ({ width = 24, height = 24, className, ...rest }: Icon) => {
+const CrossIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__cross', className)}
+      {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       aria-hidden="true"
-      height={height}
-      width={width}
-      {...rest}
+      height="24"
+      width="24"
     >
       <path
         d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"

diff --git a/packages/nhsuk-frontend-react/src/icons/search/Search.tsx b/packages/nhsuk-frontend-react/src/icons/search/Search.tsx
@@ -2,17 +2,17 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const SearchIcon = ({ className, width = 34, height = 34, ...rest }: Icon) => {
+const SearchIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__search', className)}
+      {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       aria-hidden="true"
       focusable="false"
-      width={width}
-      height={height}
-      {...rest}
+      width="34"
+      height="34"
     >
       <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
     </svg>

diff --git a/packages/nhsuk-frontend-react/src/icons/tick/Tick.tsx b/packages/nhsuk-frontend-react/src/icons/tick/Tick.tsx
@@ -2,17 +2,17 @@ import React from 'react';
 import { Icon } from '@/types/icon';
 import clsx from 'clsx';
 
-const TickIcon = ({ width = 24, height = 24, className, ...rest }: Icon) => {
+const TickIcon = ({ className, ...rest }: Icon) => {
   return (
     <svg
       className={clsx('nhsuk-icon nhsuk-icon__tick', className)}
+      {...rest}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
       aria-hidden="true"
-      width={width}
-      height={height}
-      {...rest}
+      width="24"
+      height="24"
     >
       <path
         strokeWidth="4"

diff --git a/packages/nhsuk-frontend-react/src/types/icon.ts b/packages/nhsuk-frontend-react/src/types/icon.ts
@@ -1,6 +1,3 @@
 import { SVGProps } from 'react';
 
-export type Icon = {
-  width?: number;
-  height?: number;
-} & SVGProps<SVGSVGElement>;
+export type Icon = SVGProps<SVGSVGElement>;