svgIcon を mui から直接

Author: a01sa01to

workspaces/app/src/features/icons/components/SvgIcon.tsx

@@ -1,7 +1,7 @@
+import { NavigateNext } from '@mui/icons-material';
 import { Suspense } from 'react';
 import styled from 'styled-components';
 
-import { SvgIcon } from '../../../features/icons/components/SvgIcon';
 import { Box } from '../../../foundation/components/Box';
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
@@ -92,7 +92,7 @@ const RankingCard: React.FC<Props> = ({ bookId }) => {
               <Text color={Color.Secondary} typography={Typography.NORMAL14} weight="bold">
                 この漫画を読む
               </Text>
-              <SvgIcon color={Color.Secondary} height={32} type="NavigateNext" width={32} />
+              <NavigateNext style={{ color: Color.Secondary, height: 32, width: 32 }} />
             </Flex>
           </Box>
         </Flex>

workspaces/app/src/features/ranking/components/RankingCard.tsx

@@ -1,7 +1,7 @@
+import { Close } from '@mui/icons-material';
 import { useAtom } from 'jotai';
 import styled from 'styled-components';
 
-import { SvgIcon } from '../../features/icons/components/SvgIcon';
 import { DialogContentAtom } from '../atoms/DialogContentAtom';
 import { Color, Space } from '../styles/variables';
 
@@ -51,7 +51,7 @@ export const Dialog: React.FC = () => {
     <_Overlay>
       <_Wrapper>
         <_CloseButton onClick={() => updateContent(null)}>
-          <SvgIcon color={Color.MONO_A} height={32} type="Close" width={32} />
+          <Close style={{ color: Color.MONO_A, height: 32, width: 32 }} />
         </_CloseButton>
         <_Container>{content}</_Container>
       </_Wrapper>

workspaces/app/src/foundation/components/Dialog.tsx

@@ -1,6 +1,6 @@
+import { Favorite, FavoriteBorder } from '@mui/icons-material';
 import styled from 'styled-components';
 
-import { SvgIcon } from '../../../features/icons/components/SvgIcon';
 import { Color, Space } from '../../../foundation/styles/variables';
 
 const _Button = styled.button<{ $outlined: boolean }>`
@@ -28,12 +28,11 @@ export const FavButton: React.FC<Props> = ({ enabled, onClick }) => {
       aria-label={enabled ? 'お気に入りを解除する' : 'お気に入りに追加する'}
       onClick={onClick}
     >
-      <SvgIcon
-        color={enabled ? Color.Favorite : Color.MONO_40}
-        height={24}
-        type={enabled ? 'Favorite' : 'FavoriteBorder'}
-        width={24}
-      />
+      {enabled ? (
+        <Favorite style={{ color: Color.Favorite, height: 24, width: 24 }} />
+      ) : (
+        <FavoriteBorder style={{ color: Color.MONO_40, height: 24, width: 24 }} />
+      )}
     </_Button>
   );
 };

workspaces/app/src/pages/BookDetailPage/internal/FavButton.tsx

@@ -1,6 +1,6 @@
+import { Search } from '@mui/icons-material';
 import styled from 'styled-components';
 
-import { SvgIcon } from '../../../features/icons/components/SvgIcon';
 import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
@@ -34,7 +34,7 @@ export const CoverSection: React.FC = () => {
     <_Wrapper>
       <HeroImage />
       <_SearchLink href="/search">
-        <SvgIcon color={Color.MONO_A} height={24} type="Search" width={24} />
+        <Search style={{ color: Color.MONO_A, height: 24, width: 24 }} />
         <Text color={Color.MONO_A} typography={Typography.NORMAL16}>
           検索
         </Text>

workspaces/app/src/pages/TopPage/internal/CoverSection.tsx

@@ -1,8 +1,8 @@
+import { ArrowBack } from '@mui/icons-material';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { styled } from 'styled-components';
 
-import { SvgIcon } from './features/icons/components/SvgIcon';
 import { Link } from './foundation/components/Link';
 import { Text } from './foundation/components/Text';
 import { ActionLayout } from './foundation/layouts/ActionLayout';
@@ -34,7 +34,7 @@ export const Router: React.FC = () => {
           <ActionLayout
             leftContent={
               <_BackToTopButton href={'/'}>
-                <SvgIcon color={Color.MONO_100} height={32} type="ArrowBack" width={32} />
+                <ArrowBack style={{ color: Color.MONO_100, height: 32, width: 32 }} />
                 <Text color={Color.MONO_100} typography={Typography.NORMAL16} weight="bold">
                   トップへ戻る
                 </Text>