[REFACTOR] 아이콘 사용방식 개선

[createhb21]

example1

svg를 React 컴포넌트로 변환

import { Interpolation, Theme } from '@emotion/react';
import React from 'react';
import { f } from 'styles';

const SVG = `
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.20001C8.24837 2.20001 5.2002 5.24818 5.2002 9.00001V13.7578L3.33456 16.5563C3.24695 16.6877 3.2002 16.8421 3.2002 17V18C3.2002 18.4418 3.55837 18.8 4.0002 18.8H9.20639L9.20088 18.933C9.20042 18.944 9.2002 18.9551 9.2002 18.9661C9.2002 20.5139 10.4457 21.8 12.0002 21.8C13.5546 21.8 14.8002 20.5139 14.8002 18.9661V18.8H20.0002C20.442 18.8 20.8002 18.4418 20.8002 18V17C20.8002 16.8421 20.7534 16.6877 20.6658 16.5563L18.8002 13.7578V9.00001C18.8002 5.24818 15.752 2.20001 12.0002 2.20001ZM13.2002 18.8H10.8078L10.8003 18.9807C10.808 19.6633 11.3592 20.2 12.0002 20.2C12.6457 20.2 13.2002 19.6557 13.2002 18.9661V18.8ZM19.172 17.2L17.3346 14.4438C17.2469 14.3124 17.2002 14.158 17.2002 14V9.00001C17.2002 6.13184 14.8684 3.80001 12.0002 3.80001C9.13202 3.80001 6.8002 6.13184 6.8002 9.00001V14C6.8002 14.158 6.75344 14.3124 6.66584 14.4438L4.82834 17.2H19.172Z" fill="currentColor"/>
</svg>
`;

const IconBell: React.FC<{ css?: Interpolation<Theme> }> = ({ css }) => (
  <div css={[f.flex, css]} dangerouslySetInnerHTML={{ __html: SVG }} />
);

export default IconBell;

---

example2

declare module "*.svg" {
  import React = require("react");
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

설정 후

import React, { useState, forwardRef } from "react";
import styled from "styled-components";

import { PasswordShowIcon } from "assets/icon/index";
import { mixinBtn_icon } from "style/mixin/button";
import Input from "./Input";

const PasswordInput = ({ id, ...restProps }, ref) => {
  const [isShowPassword, setIsShowPassword] = useState(false);

  const handleToggleShowPassword = () => {
    setIsShowPassword((prev) => !prev);
  };

  return (
    <Root>
      <CustomInput
        type={isShowPassword ? "text" : "password"}
        ref={ref}
        id={id}
        {...restProps}
      />
      <PasswordShowBtn
        type="button"
        aria-selected={isShowPassword}
        onClick={handleToggleShowPassword}
      >
        <PasswordShowIcon />
      </PasswordShowBtn>
    </Root>
  );
};

export default forwardRef(PasswordInput);

const Root = styled.div`
  position: relative;
  display: flex;
  align-items: center;
`;

const CustomInput = styled(Input)`
  height: 44px;
  padding-right: 32px;
`;

const PasswordShowBtn = styled.button`
  ${mixinBtn_icon};
  position: absolute;
  right: 12px;
  height: 28px;

  & > svg {
    width: 20px;
    height: 20px;
    fill: ${({ theme }) => theme.color.gray_50};
  }

  &[aria-selected="true"] > svg {
    fill: ${({ theme }) => theme.color.primary_40};
  }
`;

처럼 사용 !

---

3안은 svgr 라이브러리 이용

---

저는 1번이 괜찮아보이는데 의견 남겨주세요 !
@ian-ck

[ian-ck]

1번이 더 좋아보이긴 하네요!
일단 1번으로 진행해봐주시구!

개선할 포인트 나오면 그때 또 얘기해보시죵