icon svg 컴포넌트 스타일 props 넘기기

 

import React, { useState, Suspense, lazy } from 'react';
import './styles.css';

const iconMap = {
  icon1: lazy(() => import('./icons/icon1.svg')),
  icon2: lazy(() => import('./icons/icon2.svg')),
};

const LazySvgLoader = ({ name, style, onClick }) => {
  const LazySvgIcon = iconMap[name] || null;

  return (
    <Suspense fallback={<div>Loading Icon...</div>}>
      {LazySvgIcon ? (
        <div style={style} onClick={onClick}>
          <LazySvgIcon />
        </div>
      ) : (
        <div>Icon not found</div>
      )}
    </Suspense>
  );
};

const App = () => {
  const [isRotating, setIsRotating] = useState(false);

  const handleClick = () => {
    setIsRotating(!isRotating);
  };

  const rotationStyle = {
    display: 'inline-block',
    animation: isRotating ? 'rotate 2s linear infinite' : 'none',
  };

  return (
    <div>
      <LazySvgLoader name="icon1" style={rotationStyle} onClick={handleClick} />
      <LazySvgLoader name="icon2" style={rotationStyle} onClick={handleClick} />
    </div>
  );
};

export default App;

 

 

const iconMap = {
  icon1: lazy(() => import('./icons/icon1.svg')),
  icon2: lazy(() => import('./icons/icon2.svg')),
};

 

이게 좀 그렇긴한데... 그래도 컴포넌트 만들어서 쓰면 이 방법 밖엔 없는 것 같다

 

++ 더 알아볼 예정