icon migration to ts added

frontend/package.json

@@ -52,6 +52,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.26",
+    "@types/styled-system": "^5.1.16",
     "@typescript-eslint/eslint-plugin": "5.42.1",
     "@typescript-eslint/parser": "5.42.1",
     "@vitejs/plugin-react": "1.3.0",

frontend/src/components/atoms/Icon.jsx → frontend/src/components/atoms/Icon.tsx

@@ -1,16 +1,29 @@
+import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { space, typography } from 'styled-system'
 import { colors } from '../../theme'
 
-const IconStyled = styled.span`
+type TIconStyled = {
+  size: number
+  color: string
+  fill: number
+  wght: number
+  grad: number
+  opsz: number
+  className: string
+}
+
+const IconStyled = styled.span<TIconStyled>`
   font-variation-settings: 'FILL' ${(props) => props.fill}, 'wght' ${(props) => props.wght},
     'GRAD' ${(props) => props.grad}, 'opsz' ${(props) => props.opsz};
   color: ${(props) => props.color};
   font-size: ${(props) => props.size}px;
   ${space}
   ${typography}
 `
+type TIcon = {
+  name: string
+} & Partial<TIconStyled>
 
 function Icon({
   name,
@@ -22,7 +35,7 @@ function Icon({
   opsz = 48,
   className = '',
   ...props
-}) {
+}: TIcon) {
   return (
     <IconStyled
       className={`material-symbols-outlined ${className}`}
@@ -39,15 +52,4 @@ function Icon({
   )
 }
 
-Icon.propTypes = {
-  name: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  color: PropTypes.string,
-  fill: PropTypes.number,
-  wght: PropTypes.number,
-  grad: PropTypes.number,
-  opsz: PropTypes.number,
-  className: PropTypes.string,
-}
-
 export default styled(Icon)``