chore: migrate svg components js to tsx (#5029)

Flagsmith · Jan 22, 2025 · ebe8448 · ebe8448
1 parent c0e8b81
commit ebe8448
Show file tree

Hide file tree

Showing 21 changed files with 194 additions and 64 deletions.
diff --git a/frontend/web/components/svg/ArrowUpIcon.js → frontend/web/components/svg/ArrowUpIcon.tsx b/frontend/web/components/svg/ArrowUpIcon.js → frontend/web/components/svg/ArrowUpIcon.tsx
@@ -1,13 +1,18 @@
 import React from 'react'
 
-function ArrowUpIcon({ className, height, width }) {
+interface ArrowUpIconProps {
+  className?: string
+  height?: string | number
+  width?: string | number
+}
+
+const ArrowUpIcon: React.FC<ArrowUpIconProps> = ({
+  className,
+  height,
+  width = '100%',
+}) => {
   return (
-    <svg
-      className={className}
-      width={width || '100%'}
-      height={height}
-      viewBox='0 0 11 7'
-    >
+    <svg className={className} width={width} height={height} viewBox='0 0 11 7'>
       <path
         d='M10.888 6.399l-.49.49a.297.297 0 01-.421 0L5.495 2.416 1.012 6.89a.297.297 0 01-.42 0l-.49-.49a.297.297 0 010-.421L5.283.795a.297.297 0 01.42 0l5.184 5.183a.297.297 0 010 .42z'
         fill='#63f'

diff --git a/frontend/web/components/svg/AuditLogIcon.js → frontend/web/components/svg/AuditLogIcon.tsx b/frontend/web/components/svg/AuditLogIcon.js → frontend/web/components/svg/AuditLogIcon.tsx
@@ -1,16 +1,28 @@
 import React from 'react'
 
-function AuditLogIcon({ className, fill, height, width }) {
+interface AuditLogIconProps {
+  className?: string
+  fill?: string
+  height?: string | number
+  width?: string | number
+}
+
+function AuditLogIcon({
+  className,
+  fill = 'white',
+  height,
+  width = '100%',
+}: AuditLogIconProps) {
   return (
     <svg
       className={className}
-      width={width || '100%'}
+      width={width}
       height={height}
       viewBox='0 0 26 23'
     >
       <path
         d='M23.2 22.4H2.4A2.4 2.4 0 010 20V2.4A2.4 2.4 0 012.4 0h20.8a2.4 2.4 0 012.4 2.4V20a2.4 2.4 0 01-2.4 2.4zM6.4 4.4a2 2 0 100 4 2 2 0 000-4zm0 4.8a2 2 0 100 4 2 2 0 000-4zm0 4.8a2 2 0 100 4 2 2 0 000-4zm14.4-6.8V5.6a.6.6 0 00-.6-.6h-10a.6.6 0 00-.6.6v1.6a.6.6 0 00.6.6h10a.6.6 0 00.6-.6zm0 4.8v-1.6a.6.6 0 00-.6-.6h-10a.6.6 0 00-.6.6V12a.6.6 0 00.6.6h10a.6.6 0 00.6-.6zm0 4.8v-1.6a.6.6 0 00-.6-.6h-10a.6.6 0 00-.6.6v1.6a.6.6 0 00.6.6h10a.6.6 0 00.6-.6z'
-        fill={fill || 'white'}
+        fill={fill}
         fillRule='evenodd'
       />
     </svg>

diff --git a/frontend/web/components/svg/CaretDownIcon.js → ...tend/web/components/svg/CaretDownIcon.tsx b/frontend/web/components/svg/CaretDownIcon.js → ...tend/web/components/svg/CaretDownIcon.tsx
@@ -1,6 +1,10 @@
 import React from 'react'
 
-function CaretDownIcon({ className }) {
+interface CaretDownIconProps {
+  className?: string
+}
+
+const CaretDownIcon: React.FC<CaretDownIconProps> = ({ className }) => {
   return (
     <div style={{ paddingRight: 2 }}>
       <svg

diff --git a/...tend/web/components/svg/CaretRightIcon.js → ...end/web/components/svg/CaretRightIcon.tsx b/...tend/web/components/svg/CaretRightIcon.js → ...end/web/components/svg/CaretRightIcon.tsx
@@ -1,6 +1,10 @@
 import React from 'react'
 
-function CaretRightIcon({ className }) {
+interface CaretRightIconProps {
+  className?: string
+}
+
+const CaretRightIcon: React.FC<CaretRightIconProps> = ({ className }) => {
   return (
     <svg className={className} width={9} height={10} viewBox='0 0 9 10'>
       <path

diff --git a/...d/web/components/svg/DocumentationIcon.js → .../web/components/svg/DocumentationIcon.tsx b/...d/web/components/svg/DocumentationIcon.js → .../web/components/svg/DocumentationIcon.tsx
@@ -1,10 +1,20 @@
 import React from 'react'
 
-function DocumentationIcon({ className, height, width }) {
+type DocumentationIconProps = {
+  className?: string
+  height?: string | number
+  width?: string | number
+}
+
+const DocumentationIcon: React.FC<DocumentationIconProps> = ({
+  className,
+  height,
+  width = '100%',
+}) => {
   return (
     <svg
       className={className}
-      width={width || '100%'}
+      width={width}
       height={height}
       viewBox='0 0 16 21'
     >

diff --git a/...components/svg/EnvironmentSettingsIcon.js → ...omponents/svg/EnvironmentSettingsIcon.tsx b/...components/svg/EnvironmentSettingsIcon.js → ...omponents/svg/EnvironmentSettingsIcon.tsx
@@ -1,6 +1,12 @@
 import React from 'react'
 
-function EnvironmentSettingsIcon({ className }) {
+interface EnvironmentSettingsIconProps {
+  className?: string
+}
+
+const EnvironmentSettingsIcon: React.FC<EnvironmentSettingsIconProps> = ({
+  className,
+}) => {
   return (
     <svg className={className} viewBox='0 0 26 21'>
       <path

diff --git a/frontend/web/components/svg/FeaturesIcon.js → frontend/web/components/svg/FeaturesIcon.tsx b/frontend/web/components/svg/FeaturesIcon.js → frontend/web/components/svg/FeaturesIcon.tsx
@@ -1,6 +1,10 @@
 import React from 'react'
 
-function FeaturesIcon({ className }) {
+interface FeaturesIconProps {
+  className?: string
+}
+
+const FeaturesIcon: React.FC<FeaturesIconProps> = ({ className }) => {
   return (
     <svg className={className} viewBox='0 0 21 21'>
       <path

diff --git a/frontend/web/components/svg/LogoutIcon.js → frontend/web/components/svg/LogoutIcon.tsx b/frontend/web/components/svg/LogoutIcon.js → frontend/web/components/svg/LogoutIcon.tsx
@@ -1,6 +1,10 @@
 import React from 'react'
 
-function LogoutIcon({ className }) {
+interface LogoutIconProps {
+  className?: string
+}
+
+const LogoutIcon: React.FC<LogoutIconProps> = ({ className }) => {
   return (
     <svg className={className} width={18} height={14} viewBox='0 0 18 14'>
       <path

diff --git a/frontend/web/components/svg/NavIconSmall.js → frontend/web/components/svg/NavIconSmall.tsx b/frontend/web/components/svg/NavIconSmall.js → frontend/web/components/svg/NavIconSmall.tsx
@@ -1,6 +1,10 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-function NavIconSmall({ className }) {
+interface NavIconSmallProps {
+  className?: string
+}
+
+const NavIconSmall: FC<NavIconSmallProps> = ({ className }) => {
   return (
     <svg className={className} viewBox='0 0 320 320'>
       <g>

diff --git a/...end/web/components/svg/OrgSettingsIcon.js → ...nd/web/components/svg/OrgSettingsIcon.tsx b/...end/web/components/svg/OrgSettingsIcon.js → ...nd/web/components/svg/OrgSettingsIcon.tsx
@@ -1,10 +1,22 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-function OrgSettingsIcon({ className, fill, height, width }) {
+interface OrgSettingsIconProps {
+  className?: string
+  fill?: string
+  height?: string | number
+  width?: string | number
+}
+
+const OrgSettingsIcon: FC<OrgSettingsIconProps> = ({
+  className,
+  fill,
+  height,
+  width = '100%',
+}) => {
   return (
     <svg
       className={className}
-      width={width || '100%'}
+      width={width}
       height={height}
       viewBox='0 0 26 18'
     >

diff --git a/frontend/web/components/svg/PlayIcon.js → frontend/web/components/svg/PlayIcon.tsx b/frontend/web/components/svg/PlayIcon.js → frontend/web/components/svg/PlayIcon.tsx
@@ -1,6 +1,10 @@
 import React from 'react'
 
-function PlayIcon({ className }) {
+interface PlayIconProps {
+  className?: string
+}
+
+const PlayIcon: React.FC<PlayIconProps> = ({ className }) => {
   return (
     <svg className={className} viewBox='0 0 315 315'>
       <path

diff --git a/frontend/web/components/svg/PlusIcon.js b/frontend/web/components/svg/PlusIcon.js
diff --git a/frontend/web/components/svg/PlusIcon.tsx b/frontend/web/components/svg/PlusIcon.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface PlusIconProps {
+  className?: string
+  width?: number
+}
+
+const PlusIcon: React.FC<PlusIconProps> = ({ className, width }) => (
+  <svg width={width} className={className} viewBox='0 0 15 13'>
+    <path
+      d='M13.8 5.5H8.4V.55C8.4.246 8.132 0 7.8 0H6.6c-.332 0-.6.246-.6.55V5.5H.6c-.332 0-.6.246-.6.55v1.1c0 .304.268.55.6.55H6v4.95c0 .304.268.55.6.55h1.2c.332 0 .6-.246.6-.55V7.7h5.4c.332 0 .6-.246.6-.55v-1.1c0-.304-.268-.55-.6-.55z'
+      fill='#FFF'
+      fillRule='nonzero'
+    />
+  </svg>
+)
+
+export default PlusIcon
diff --git a/...web/components/svg/ProjectSettingsIcon.js → ...eb/components/svg/ProjectSettingsIcon.tsx b/...web/components/svg/ProjectSettingsIcon.js → ...eb/components/svg/ProjectSettingsIcon.tsx
@@ -1,16 +1,28 @@
 import React from 'react'
 
-function ProjectSettingsIcon({ className, fill, height, width }) {
+interface ProjectSettingsIconProps {
+  className?: string
+  fill?: string
+  height?: string | number
+  width?: string | number
+}
+
+const ProjectSettingsIcon: React.FC<ProjectSettingsIconProps> = ({
+  className,
+  fill = 'white',
+  height,
+  width = '100%',
+}) => {
   return (
     <svg
       className={className}
-      width={width || '100%'}
+      width={width}
       height={height}
       viewBox='0 0 23 23'
     >
       <path
         d='M20 0H2.4A2.4 2.4 0 000 2.4V20a2.4 2.4 0 002.4 2.4H20a2.4 2.4 0 002.4-2.4V2.4A2.4 2.4 0 0020 0zm-.8 16.2c0 .33-.27.6-.6.6H16V18c0 .665-.535 1.2-1.2 1.2H14c-.665 0-1.2-.535-1.2-1.2v-1.2h-9c-.33 0-.6-.27-.6-.6v-2c0-.33.27-.6.6-.6h9v-1.2c0-.665.535-1.2 1.2-1.2h.8c.665 0 1.2.535 1.2 1.2v1.2h2.6c.33 0 .6.27.6.6v2zm0-8c0 .33-.27.6-.6.6h-9V10c0 .665-.535 1.2-1.2 1.2h-.8c-.665 0-1.2-.535-1.2-1.2V8.8H3.8c-.33 0-.6-.27-.6-.6v-2c0-.33.27-.6.6-.6h2.6V4.4c0-.665.535-1.2 1.2-1.2h.8c.665 0 1.2.535 1.2 1.2v1.2h9c.33 0 .6.27.6.6v2z'
-        fill={fill || 'white'}
+        fill={fill}
         fillRule='evenodd'
       />
     </svg>

diff --git a/frontend/web/components/svg/SegmentsIcon.js → frontend/web/components/svg/SegmentsIcon.tsx b/frontend/web/components/svg/SegmentsIcon.js → frontend/web/components/svg/SegmentsIcon.tsx
@@ -1,6 +1,18 @@
 import React from 'react'
 
-function SegmentsIcon({ className, fill = '#FFF', height, width }) {
+interface SegmentsIconProps {
+  className?: string
+  fill?: string
+  height?: number | string
+  width?: number | string
+}
+
+const SegmentsIcon: React.FC<SegmentsIconProps> = ({
+  className,
+  fill = '#FFF',
+  height,
+  width,
+}) => {
   return (
     <svg
       width={width}

diff --git a/frontend/web/components/svg/SettingsIcon.js → frontend/web/components/svg/SettingsIcon.tsx b/frontend/web/components/svg/SettingsIcon.js → frontend/web/components/svg/SettingsIcon.tsx
@@ -1,9 +1,19 @@
 import React from 'react'
 
-function SettingsIcon({ fill = 'white', height = 24, width = 24 }) {
+interface SettingsIconProps {
+  fill?: string
+  height?: number
+  width?: number
+}
+
+const SettingsIcon: React.FC<SettingsIconProps> = ({
+  fill = 'white',
+  height = 24,
+  width = 24,
+}) => {
   return (
     <svg
-      width={width || '100%'}
+      width={width}
       height={height}
       viewBox='0 0 24 24'
       fill='none'

diff --git a/frontend/web/components/svg/SparklesIcon.js → frontend/web/components/svg/SparklesIcon.tsx b/frontend/web/components/svg/SparklesIcon.js → frontend/web/components/svg/SparklesIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-function SparklesIcon({}) {
+const SparklesIcon: React.FC<{}> = () => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

diff --git a/frontend/web/components/svg/UpgradeIcon.js → frontend/web/components/svg/UpgradeIcon.tsx b/frontend/web/components/svg/UpgradeIcon.js → frontend/web/components/svg/UpgradeIcon.tsx
@@ -1,16 +1,28 @@
 import React from 'react'
 
-function UpgradeIcon({ className, fill, height, width }) {
+interface UpgradeIconProps {
+  className?: string
+  fill?: string
+  height?: string | number
+  width?: string | number
+}
+
+const UpgradeIcon: React.FC<UpgradeIconProps> = ({
+  className,
+  fill = '#FFF',
+  height,
+  width = '100%',
+}) => {
   return (
     <svg
       className={className}
-      width={width || '100%'}
+      width={width}
       height={height}
       viewBox='0 0 21 21'
     >
       <path
         d='M20.207.772a.726.726 0 00-.498-.497C18.425 0 17.419 0 16.417 0c-4.129 0-6.605 2.208-8.453 5.12H3.796c-.652 0-1.424.477-1.716 1.06L.103 10.132c-.061.135-.095.28-.1.428 0 .53.43.96.96.96H5.12a3.84 3.84 0 013.84 3.84v4.16c0 .53.43.96.96.96.148-.005.294-.04.429-.1l3.95-1.977c.582-.291 1.059-1.062 1.059-1.714v-4.177c2.903-1.853 5.12-4.336 5.12-8.444.004-1.006.004-2.012-.272-3.296zM15.362 6.72a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2zM1.427 14.083C.393 15.117-.118 17.703.023 20.456c2.765.143 5.345-.374 6.375-1.404 1.611-1.611 1.715-3.76.252-5.222-1.463-1.462-3.611-1.359-5.223.253zm3.266 3.36c-.344.344-1.204.516-2.125.469-.047-.918.123-1.78.468-2.124.537-.538 1.253-.572 1.74-.085.488.488.454 1.204-.083 1.74z'
-        fill={fill || '#FFF'}
+        fill={fill}
         fillRule='evenodd'
       />
     </svg>

diff --git a/...nd/web/components/svg/UserSettingsIcon.js → ...d/web/components/svg/UserSettingsIcon.tsx b/...nd/web/components/svg/UserSettingsIcon.js → ...d/web/components/svg/UserSettingsIcon.tsx
@@ -1,6 +1,16 @@
 import React from 'react'
 
-function UserSettingsIcon({ className, height, width }) {
+interface UserSettingsIconProps {
+  className?: string
+  height?: string | number
+  width?: string | number
+}
+
+const UserSettingsIcon: React.FC<UserSettingsIconProps> = ({
+  className,
+  height,
+  width,
+}) => {
   return (
     <svg
       className={className}

diff --git a/frontend/web/components/svg/UsersIcon.js b/frontend/web/components/svg/UsersIcon.js
diff --git a/frontend/web/components/svg/UsersIcon.tsx b/frontend/web/components/svg/UsersIcon.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+interface UsersIconProps {
+  className?: string
+}
+
+const UsersIcon: React.FC<UsersIconProps> = ({ className }) => (
+  <svg className={className} viewBox='0 0 26 18'>
+    <path
+      d='M7.68 8.96a4.478 4.478 0 004.48-4.48A4.478 4.478 0 007.68 0 4.478 4.478 0 003.2 4.48a4.478 4.478 0 004.48 4.48zm3.072 1.28h-.332c-.832.4-1.756.64-2.74.64-.984 0-1.904-.24-2.74-.64h-.332A4.61 4.61 0 000 14.848V16c0 1.06.86 1.92 1.92 1.92h11.52c1.06 0 1.92-.86 1.92-1.92v-1.152a4.61 4.61 0 00-4.608-4.608zM19.2 8.96a3.841 3.841 0 000-7.68 3.841 3.841 0 000 7.68zm1.92 1.28h-.152a5.39 5.39 0 01-1.768.32 5.39 5.39 0 01-1.768-.32h-.152c-.816 0-1.568.236-2.228.616.976 1.052 1.588 2.448 1.588 3.992v1.536c0 .088-.02.172-.024.256h7.064c1.06 0 1.92-.86 1.92-1.92a4.478 4.478 0 00-4.48-4.48z'
+      fill='#FFF'
+      fillRule='nonzero'
+    />
+  </svg>
+)
+
+export default UsersIcon