SVG 이미지 색상 변경하기
프로젝트를 하다보면 이미지 손상을 막기위해 svg로 파일을 저장하곤 하는데, 이때 svg 이미지 파일의 색상을 어떻게 하면 변경할 수 있는지 알아보도록 하겠다!
우선 내가 가지고 있는 arrow.svg의 파일을 보자.
<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="...">
<path d="..." fill="current"/>
</svg>내가 설정한 색상으로 주입시키고 싶으면 path 태그의 fill의 값을 current로 주자.
그런 다음 해당 이미지를 사용할 파일에서 import해오면 된다.
사용할 때 img 태그를 사용하는 것이 아닌 import한 svg를 태그 형태로 사용하는 방법으로 해야 원하는 색상으로 변경할 수 있다.
나의 경우 hover를 했을 때 버튼 내부의 화살표 아이콘의 색상이 변경되도록 만들고 싶었기에 css를 아래처럼 적용하였다.
여기 까지는 크게 어려움 없이 할 수 있다. 그러나 문제는 import에서 ReactComponent를 사용할 수 없다는 타입스크립트 에러 메세지를 만났다... 여러 블로그를 보며 이 문제를 해결하였다.
Vite에서 ReactComponent 사용하기
(개발 환경은 Vite + React + TypeScript 에서 진행되었다.)
우선 위와 같은 방법을 사용하기 위해서는 svg 파일을 리액트 컴포넌트로 변환할 수 있어야 하는데 이를 도와줄 라이브러리를 설치해준다.
npm i -D vite-plugin-svgr설치가 완료되었다면 세부 설정을 해주어야 한다.
vite.config.ts 파일에 아래와 같이 import하고 plugins에 svgr()을 추가해주자.
// vite.config.js
...
import svgr from 'vite-plugin-svgr'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), svgr()],
})src 경로에 있는 vite-env.d.ts 파일에도 아래와 같이 변경해주자.
// vite-env.d.ts
/// <reference types="vite-plugin-svgr/client" />그런 다음 최상위 경로 또는 src 폴더 안에 svg.d.ts 이름으로 파일을 생성해주자. (다른 외국 블로그에서 custom.d.ts 이름으로도 파일을 많이 생성하여 남겨본다.)
만들어진 파일에 아래 코드를 추가해준다.
// svg.d.ts or custom.d.ts
declare module '*.svg' {
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}위 파일을 만들어주는 이유는 ReactComponent를 사용하는 과정에서 만난 에러 메세지를 실질적으로 해결해주는 역할을 한다. 코드를 간략히 해석해보자면 모든 svg 파일의 타입을 정의해주었다고 보면 된다.
👀 .d.ts 파일이 무엇인가?
type을 정의(declare)하기 위한 파일이다. 이 파일을 왜 사용하는가 하면, 타입스크립트에서 라이브러리를 사용할 때를 생각해보면 @types/ 가 붙어있다. 그러나 우리가 설치한 라이브러리는 타입체킹을 해주고 있지 않다. 때문에 타입스크립트 환경에서도 사용할 수 있도록 만들어주는 것이라 생각하면 된다!
+) declare 키워드
컴파일러에게 해당 변수나 함수의 존재를 알리고, TS 컴파일러에게 타입 정보를 알린다.
이제 tsconfig,json 파일에 들어가 include에 방금 만든 파일을 명시해주면 완성이다..!
// tsconfig.json
{
...
"include": ["src", "src/svg.d.ts"],
}여기까지 마무리가 되었다면, svg를 컴포넌트처럼 별 문제없이 사용할 수 있게 될 것이다.
📜 출처