Lucide Icon에 emotion css 적용하기

Emotion는 JavaScript로 CSS 스타일을 작성하도록 설계된 라이브러리이다. 따로 CSS 파일을 생성할 필요없이 JavaScript로 바로 CSS를 입힐 수 있다.
이모션 공식홈페이지

토이프로젝트에서 Lucide Icon과 emotion css를 사용하는데 아래처럼 코드를 작성하니까

import { IArrowButtonProps } from '@/interfaces/arrowButton';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import styled from '@emotion/styled';

export const LeftArrowButton = ({ onClick }: IArrowButtonProps) => {
	return <ChevronLeft onClick={onClick}  />;
};

export const RightArrowButton = ({ onClick }: IArrowButtonProps) => {
	return <ChevronRight onClick={onClick} />;
};

const ChevronLeft = styled.svg`
	border-radius: 50px;
	border: 1px solid black;

🚨에러발생

요런 에러가 발생했다.

1.이름충돌:Import declaration conflicts with local declaration of 'ChevronLeft'.
ChevronLeft가 lucide-react에서 가져온 컴포넌트이면서, 같은 이름의 로컬 변수나 컴포넌트를 정의한 경우이다.

2.중복 선언:'ChevronLeft' is already defined.
ChevronLeft를 가져온 후, 같은 이름으로 로컬에서 또 다른 변수나 컴포넌트를 선언한 경우로 발생한 문제이다.

import { ChevronLeft, ChevronRight } from 'lucide-react';

const ChevronLeft = styled.svg`
	border-radius: 50px;
	border: 1px solid black;
`;

즉, 이미 ucide-react에서 ChevronLeft를 가져왔는데 왜 const ChevronLeft로 중복 선언하냐 하는 문제였다.

✅해결방법

lucide-react에서 가져온 아이콘 컴포넌트를 스타일링하려면, styled를 사용하여 svg 요소를 스타일링해야 하지만, ChevronLeft와 ChevronRight는 svg 요소가 아닌 React 컴포넌트이므로, 스타일링을 직접 적용하는 방법은 다르다.

styled-components를 사용하여 스타일링하려면, 스타일을 래핑할 수 있는 다른 방법이 필요하다.

1.아이콘을 래핑하는 컴포넌트 스타일링
styled를 사용하여 아이콘을 래핑하는 컴포넌트를 만들어 스타일을 적용할 수 있다. lucide-react의 아이콘을 styled로 래핑하여 스타일을 적용한다. ChevronLeft를 ArrowLeft로, ChevronRight를 ArrowRight로 래핑하여 사용한다.

import { IArrowButtonProps } from '@/interfaces/arrowButton';
import { ChevronLeft as ArrowLeft, ChevronRight as ArrowRight } from 'lucide-react';
import styled from '@emotion/styled';

export const LeftArrowButton = ({ onClick }: IArrowButtonProps) => {
	return <StyledChevronLeft onClick={onClick} />;
};

export const RightArrowButton = ({ onClick }: IArrowButtonProps) => {
	return <StyledChevronRight onClick={onClick} />;
};

// 스타일을 적용할 래핑 컴포넌트
const StyledChevronLeft = styled(ArrowLeft)`
	border-radius: 50px;
	border: 1px solid black;
`;

const StyledChevronRight = styled(ArrowRight)`
	border-radius: 50px;
	border: 1px solid black;
`;

고찰

하지만 이런식으로 코드를 작성하면 중복코드가 발생한다. 그래서

import {css} from '@emotion/react';

를 사용하려고 했는데, Lucide Icon은 Emotion의 css Prop을 지원하지 않아서 적용할 수 없었다.
이런 경우는 css in js보다 그냥 css를 사용하는게 나을 수 있겠다는 생각이든다.