[React][Vite] vite-plugin-svgr을 사용해 보자

     

목차

 

이것때문에 조금 많이 헤메서 정리하고자 한다.

 

vite로 하면 tsconfig.json파일이 tsconfig.app.json, tsconfig.node.json과 함께 만들어져 혼란스럽다.

우리는 공통적인 설정을 다루는 tsconfig.json 파일을 건드리면 된다.

 

참고

https://be-senior-developer.tistory.com/252

[React] vite 빌드 시 config에 대해 알아보고 경로 설정을 해보자

 

1. 설치

pnpm add -D vite-plugin-svgr

 

 

2. vite-env.d.ts

다음을 추가 해주자 

/// <reference types="vite-plugin-svgr/client" />

 

-> 이 파일은 src 폴더내에 있어야 한다. 이것때문에 오류가 계속 생겼다..

 

3. vite.config.json

아래와 같이 vite.config.json 파일에 svgr() 함수를 import하고 svgr함수를 plugins에 넣어준다.

 

 

4. tsconfig.json 컴파일 옵션 수정

tsconfig.json 컴파일 옵션에 vite/client 타입을 추가해 주자!

    "types": ["vite/client"],

 

 

5. svg.d.ts파일 추가

최상위 폴더에 svg.d.ts 파일 추가해주자 

타입 정의를 위해서 필요하다.

declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

 

 

6. svg 파일 사용하기

아래와 같이 ?react를 붙여 불러서 컴포넌트처럼 사용하자

import InfoContainer from "./InfoContainer";
import { RowFlexContainer } from "@/styles/commonStyles";
import styled from "styled-components";
import HouseLogo from "@/assets/house.svg?react";
import CoffeeLogo from "@/assets/coffee.svg?react";

const Container = styled(RowFlexContainer)`
  gap: 10%;
  width: 100%;
  justify-content: center;
  position: absolute;
  bottom: 5%;
`;

function InfoGroup() {
  return (
    <Container>
      {" "}
      <InfoContainer text={"오늘의 음식점을 추천해줘"}>
        <HouseLogo />
      </InfoContainer>
      <InfoContainer text={"오늘의 카페를 추천해줘"}>
        <CoffeeLogo />
      </InfoContainer>
    </Container>
  );
}
export default InfoGroup;