[FE] Icon component 변경

[Todari]

issue

• close [FE] Icon component 변경 #895

구현 목적

1. �재사용 가능한 Icon component

현재 svg파일을 ReactComponent로 import해서 사용하고 있음.
하지만, 이렇게 사용하게 되면 색상도, 크기도 자유롭게 변경할 수 없는 문제점이 있음.
이에 따라 색상과 크기를 자유롭게 변경할 수 있는 IconComponent들을 구현함.

2. 유지보수의 어려움

위에서 설명한것과 마찬가지로, 크기가 다른 아이콘이 필요할 때, 별도의 Icon을 만드는 상황이 발생함 (ex. EditPencil, EditPencilSmall 등) 또한, 새로운 아이콘이 추가될 때 마다, type을 선언해주고 기본 색상을 설정하는 등 다양한 조치가 필요함.
하지만 지금 단계의 구현에서 이것이 완벽하게 해결되지 않은 것은 마찬가지

3. 사용하지 않는 svg 파일이 많음

구현 사항

1. Svg.tsx 구현

Svg component를 통해서, 색상, 크기, fill / stroke 여부를 쉽게 반영할 수 있도록 구현함
children에는 svg 내부 속성인 path, def 등을 받음

// Svg.tsx
const Svg: React.FC<SvgProps> = ({children, color, height, isUsingFill = false, size, viewBox, width, ...rest}) => {
  const {theme} = useTheme();

  return (
    <svg
      fill={isUsingFill ? (color ? theme.colors[color] : 'currentColor') : 'none'}
      height={height ?? size ?? 24}
      viewBox={viewBox ?? `0 0 ${width ?? size ?? 24} ${height ?? size ?? 24}`}
      width={width ?? size ?? 24}
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      {children}
    </svg>
  );
};

2. Icon Component 구현

위에서 구현한 Svg component에 크기를 전달하고, 해당 사이즈에 맞게 path의 d 속성이 유동적으로 변경될 수 있도록 구현함

// IconCheck.tsx
export const IconCheck = ({color = 'primary', size, width, height, ...rest}: Omit<SvgProps, 'children'>) => {
  const {theme} = useTheme();
  const w = width ?? size ?? 16;
  const h = height ?? size ?? 16;

  return (
    <Svg size={size} width={w} height={h} {...rest}>
      <path
        d={`M${w * 0.75} ${h * 0.3}L${w * 0.375} ${h * 0.675}L${w * 0.25} ${h * 0.55}`}
        stroke={theme.colors[color]}
        stroke-width={w * 0.125}
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </Svg>
  );
};

이렇게 구현했을때의 또다른 장점은, Chevron과 같이 방향을 설정하거나, on/off 등을 설정하는 등 더 다양한 variation을 가질 수 있는 Icon들에 대해서 쉽고 간편하게 대응할 수 있다는 것입니다.

// IconChevron.tsx

type direction = 'up' | 'down' | 'left' | 'right';

export const IconChevron = ({
  color = 'tertiary',
  size,
  width,
  height,
  direction = 'down',
  ...rest
}: Omit<SvgProps, 'children'> & {direction?: direction}) => {
  const {theme} = useTheme();
  const w = width ?? size ?? 16;
  const h = height ?? size ?? 16;

  const getRotation = () => {
    switch (direction) {
      case 'up':
        return 180;
      case 'left':
        return 90;
      case 'right':
        return 270;
      default:
        return 0;
    }
  };

  return (
    <Svg size={size} width={w} height={h} {...rest}>
      <g transform={`rotate(${getRotation()}, ${w / 2}, ${h / 2})`}>
        <path
          d={`M${w * 0.9} ${h * 0.33}L${w * 0.5} ${h * 0.66}L${w * 0.1} ${h * 0.33}`}
          stroke={theme.colors[color]}
          stroke-width={Math.min(w, h) * 0.1}
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </g>
    </Svg>
  );
};

구현한 IconChevron에서도 direction을 prop으로 받아 이를 적용시켰습니다.

3. 다양한 component의 variation을 확인할 수 있는 storybook

storybook/Icon에서 다양한 Icon들의 크기 및 색상 변경점들을 확인할 수 있습니다.
PR 댓글의 chromatic을 확인하셔도 좋을 것 같아요

4. 사용하지 않거나 필요하지 않은 svg 삭제 및 아이콘 적용

기존에 중복되는 Icon (chevron / chevronRight, pencil, pencilSmall) 등을 제거하고, 사용하지 않는 아이콘들 또한 제거하였습니다.

이후, 기존의 Icon들을 구현된 새로운 Icon들로 대체하였습니다.

논의하고 싶은 부분(선택)

조금 더 사용하기 쉬운 SVG component 방식을 도입하고 싶었습니다.
하지만, 현재에도 새로운 IconCoponent를 만들 때 생각보다 많은 공수가 필요하다고 생각합니다.
남은 Design 검수 작업이 마무리 되어 갈 때, 한번 더 효율적으로 사용할 수 있는 방법을 적용해보고자 합니다.

현재 구현 방식은 각 svg path에 기존 크기의 일정 비율을 곱해서 다양한 크기에 대응하도록 하는 방법인데, 이 markup을 파싱해서 모든 svg path에 대응할 수 있게 할 수 있을 것 같아요.

🫡 참고사항

---

2025.01.07 17:57 변경사항

구현 목적

기존에 구현된 방식으로는, 새로운 svg를 추가할 때 마다 path의 d attribute를 수정해줘야 하고, 복잡한 svg의 경우 이를 설정하는게 쉽지 않은 문제가 있습니다.
또한, w, h 등 기본 default 크기 또한 지정해줘야 하는 번거로움이 있습니다.
이에 svg 파일을 가지고 있기만 하다면, 쉽게 사용 가능한 Icon component를 만들 수 있게 변경하였습니다.

구현 사항

Svg.tsx

const Svg: React.FC<SvgProps> = ({children, color, size, width, height, direction, ...rest}) => {
  const {theme} = useTheme();

  const xmlString = ReactDOMServer.renderToStaticMarkup(children);

  const widthMatch = xmlString.match(/width="([^"]+)"/);
  const originWidth = widthMatch ? parseInt(widthMatch[1]) : 24;

  const heightMatch = xmlString.match(/height="([^"]+)"/);
  const originHeight = heightMatch ? parseInt(heightMatch[1]) : 24;

  const viewBox = `0 0 ${originWidth} ${originHeight}`;

  const fillMatch = xmlString.match(/fill="([^"]+)"/);
  const originFill = fillMatch ? fillMatch[1] : null;
  const fill = originFill !== 'none' ? (color ? theme.colors[color] : 'currentColor') : 'none';

  const childrenMatch = xmlString.match(/>(.+)</s);
  let childrenString = childrenMatch ? childrenMatch[1] : '';

  childrenString = childrenString.replace(
    /stroke="[^"]+"/g,
    `stroke="${color ? theme.colors[color] : 'currentColor'}"`,
  );
  childrenString = childrenString.replace(/fill="[^"]+"/g, `fill="${color ? theme.colors[color] : 'currentColor'}"`);

  const getRotation = () => {
    switch (direction) {
      case 'up':
        return 180;
      case 'left':
        return 90;
      case 'right':
        return 270;
      default:
        return 0;
    }
  };

  return (
    <div css={svgWrapperStyle(width, height, size)}>
      <svg
        css={svgStyle}
        fill={fill}
        color={color ? theme.colors[color] : 'currentColor'}
        viewBox={viewBox}
        xmlns="http://www.w3.org/2000/svg"
        transform={`rotate(${getRotation()})`}
        dangerouslySetInnerHTML={{__html: childrenString}}
        {...rest}
      />
    </div>
  );
};

export default Svg;

svg component 내부에서 children(svg 파일)을 파싱하여 기본적인 viewBox, fill 등의 정보를 가져옵니다.
이후 이 정보들과 유저가 넘긴 prop들을 적절히 적용하여 쉽게 IconComponent를 사용할 수 있도록 합니다.

사용 방법

/** @jsxImportSource @emotion/react */
import IconChevronSvg from '@assets/image/chevron.svg';

import {Direction, SvgProps} from '../Icon.type';
import Svg from '../Svg';

export const IconChevron = ({color = 'tertiary', direction = 'down', ...rest}: Omit<SvgProps, 'children'>) => {
  return (
    <Svg color={color} direction={direction} {...rest}>
      <IconChevronSvg />
    </Svg>
  );
};

svg 파일을 import한 뒤, Svg component 하위에 넣어주기만 하면 됩니다.
fill, stroke color를 변경할 필요도, d 속성을 변경할 필요도 없습니다.

element.props를 사용한 것이 아니라, 문자열 parsing을 한 이유

vite 에서 svg를 가져올 때, svg를 바로 가져오는 것이 아니라, vite 내부에서 svg를 react-component로 변환하는 과정을 거칩니다. 이 과정에서 element.props를 이용할 수 없게 됩니다.
따라서, chidlren(svg)의 속성값들을 가져오기 위해. element를 문자열로 변환한 뒤, 정규표현식을 이용해 attribute를 가져온 것입니다.

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-qrvkcotwtl.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-bblxxvwupy.chromatic.com/

[jinhokim98]

토다리 고생 많았습니다~~ 아이콘 컴포넌트부터 저번 디렉터리 구조 변경을 생각하면 많은 파일 변경이 있음에도 더 나은 방안이라면 실행하는 모습이 멋있습니다. 덕분에 더 정리된 구조 안에서 작업을 할 수 있는 것 같아요!

[jinhokim98]

이제 iconType을 받지 않고 적절한 icon을 바로 import 해서 사용하는 방식으로 변경됐네요.

[jinhokim98]

스토리북 확인해봤는데 아이콘이 어떤 사이즈에 어떤 모습으로 보이는지 확인이 바로 가능하니깐 너무 좋네요 :)
스북 장인 대토다리

[jinhokim98]

새로운 아이콘이 필요하면 이런 형식으로 컴포넌트를 제작해서 사용하면 되는거죠?

[Todari]

맞숨당~

[jinhokim98]

direction prop을 받아서 돌려버리는 것 좋네요~ 특히 up left right down 모두 대비한 것도 좋아요

[jinhokim98]

오..... 상당한 작업이 느껴져요;;;

[Todari]

GPT야 고마워

[pakxe]

리펙토링 하느라 고생 많았습니다 또달~!! 이제 더 편하고 자유롭게 사용할 수 있게 된 것 같아요 👍

[pakxe]

어떤 종류가 있는지 확인하려면 하나의 Icon에서 type으로 분기해서 사용하는게 더 편하지 않을까라고 생각했는데요!
svg안에 넣을 path를 들고다니면서 매번 주입하는게 쉬운 일은 아니니 자체를 컴포넌트로 만들게 된 것 같네요. 👍

[Todari]

맞습니다 ㅜㅜ

[pakxe]

가로세로 길이에 따라 path를 유동적으로 변경시키려고 이렇게 리터럴을 사용한 것으로 보여지는데 맞나요?

그럼 혹시 새로운 아이콘을 추가해야할때는 ai에게 이 d attr를 x, y에 따라 달라지도록 작성해달라고 명령해서 받아야하나요..?!

[Todari]

그렇습니다~! 본문에서도 말했던 것 처럼 더 편하게 만들 수 있는 방법이 존재할 것 같아요.
이 부분에 대해서도 한번 더 고민해 보고,
새로 icon을 가져오는 누구라도 편하게 쓸 수 있도록 만들어볼게용

[pakxe]

어으 아이콘을 쓰는 곳이 많은데 다 바꾸느라 고생많았습니다아 😭

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-qwmgxyrajy.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-zqgcqktthv.chromatic.com/

[soi-ha]

토다리가 Icon을 사용하기 쉽게 만들어줘서 앞으로 너무 편할 것 같아요! 고마워용

[soi-ha]

징챠 스토리북에도 꼼꼼하게 예시 남겨줘서 이해하기 넘 쉬웠어요! 쵝오

[soi-ha]

사용하기 쉽게 만들어주신 덕분에 앞으로 Icon을 활용할 때 너무 편할 것 같아요!
앞으로 열심히 사용하겠습니댱~!