Icon 컴포넌트화

[dazzel3]

✨ 의견

사용되는 Icon 이미지를 컴포넌트화 해서 사용하면 어떨까요?

예시 코드

...

const Icon = ({ name, size, style, ...props }) => {
  return (
      <StyledIcon
        size={size}
        style={style}
        src={require(`../../assets/images/icon/${name}.png`)}
        alt={name}
      />
  );
};

export default Icon;

const StyledIcon = styled.img`
  width: ${size}px;
  height: ${size}px;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
`;

장점

1. 사용할 때마다 이미지를 import하지 않아도 되고, Icon 컴포넌트만 import하면 되기 때문에 간결하다.
2. 공통 속성들을 한 번에 처리할 수 있다. 예를 들어 이미지를 사용할 때, alt 속성 작성하는 것을 까먹을 수 있다. 이러한 상황을 방지하는 방법이 될 수 있다.
3. 이미지 이름만 prop으로 넘겨줘서 사용하기 때문에 간편하고, styled-component를 사용할 때마다 만들지 않아도 된다.

[NamJwong]

저는 통일은 하지 않고 경우에 따라 적절한 방법을 썼으면 좋겠습니다

하지만 일반적으로 svg 아이콘을 이용하는 경우 svgr을 통해 svg를 컴포넌트화 해서 사용하는 방법이 좋다고 생각합니다

이유

1. svg의 색을 바꿀 수 있다 -> 하나의 svg 파일로 유연한 대응이 가능해져 불필요하게 번들 사이즈가 늘어나지 않도록 할 수 있다
2. 네이밍을 자유롭게 할 수 있다 -> <Icon /> 컴포넌트는 파일의 이름으로밖에 식별을 하지 못함 -> svg 파일 이름은 해당 아이콘 생김새를 반영하도록 지어야 유연하게 사용할 수 있어야 한다고 생각함 그런데 아이콘 생김새가 해당 아이콘의 용도를 표현하지 못하는 경우가 많음 ex 파일명 arrow.svg - 쓰임새 back 버튼
3. <Icon /> 컴포넌트와 달리 추가적인 스타일링을 jsx 내부에서 하지 않아도 된다 -> jsx 내부 스타일링은 가독성을 해침
4. <Icon /> 컴포넌트의 장점이라고 언급된 import를 하지 않아도 된다는 점은 오히려 단점이 될 수 있다고 생각한다 해당 파일의 의존성은 명확히 드러나야 한다고 생각한다

사용 예시 (pages/login.tsx)

import styled from '@emotion/styled';
import ImageLogo from 'public/images/image-logo.svg';
import LetterLogo from 'public/images/letter-logo.svg';

import GoogleLoginButton from '@/components/login/GoogleLoginButton';

export default function LoginPage() {
  return (
    <Container>
      <StyledImageLogo />
      <StyledLetterLogo />
      <Slogan>What’s your Hype Music?</Slogan>
      <GoogleLoginButton />
      <Footer>© 6Jeans. All rights reversed.</Footer>
    </Container>
  );
}

const Container = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const StyledImageLogo = styled(ImageLogo)`
  margin-top: 24.6rem;
`;

const StyledLetterLogo = styled(LetterLogo)`
  margin-top: 3.8rem;
`;

const Slogan = styled.div`
  color: #7893ea;
  font-style: normal;
  font-weight: 500;
  font-size: 2rem;
  line-height: 3rem;
  margin-top: 5.2rem;
  margin-bottom: auto;
`;

const Footer = styled.footer`
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 16px;
  color: #9f9f9f;
  margin-top: 5.6rem;
  margin-bottom: 2.2rem;
`;

[NamJwong]

img 태그를 써야 할 때에는 해당 <Icon /> 컴포넌트를 사용하기 보다는 img 태그를 직접 쓰는 것이 유연할 것 같습니다 alt는 eslint 룰로 강제하면 됩니다