svg 컴포넌트로 사용하기

프로젝트 환경 : turborepo (monorepo) + vite + typescript + storybook

 

import Check from "../../../assets/check.svg";

...
<img src={check} alt="체크" width={14} height={14} />

이렇게 src 로 불러와서 사용할 수 있지만 이 경우 정적 이미지로 사용하는 것이기때문에 색상이나 stroke-width와 같은 속성에 접근할 수 없다

 

그래서 svgr 을 사용해 컴포넌트화 하여 사용하는 것이 재사용성 측면에서도 좋다

---

나는 vite 를 사용한 리액트 프로젝트여서 아래와 같이 패키지를 설치했다

pnpm add vite-plugin-svgr --save-dev

모노레포여서 packages/ui, apps/storybook 각각 설치해주었다.
아래 이어지는 내용도 apps/storybook 하위 경로에서 설정해주었다.

 

이어서 vite.config.ts 에 관련 설정을 추가한다.

import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [react(), svgr()],
});

 

img 태그 대신 컴포넌트로 변경하여 적용

import Check from "../../../assets/check.svg";

...
<Check />

 

그러면 짜잔

스토리북에서 에러가 난다

svgr add on같은 문제가 아닐까 싶었다

---

아래와 같이 추가로 설정 해주고 해결

 

main.ts

import svgr from "vite-plugin-svgr";
...
 async viteFinal(config) {
    config.plugins = [
      ...(config.plugins || []),
      svgr({
        svgrOptions: { icon: true },
        include: "**/*.svg",
      }),
    ];
 ...

 

svg.d.ts

declare module "*.svg" {
  const content: React.FC<React.SVGProps<SVGAElement>>;
  export default content;
}

 

vite-env.d.ts

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

 

tsconfig.json

{
  "compilerOptions": {
    "types": ["vite-plugin-svgr/client"] // 추가
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "svg.d.ts"], // svg.d.ts 추가
}

 

packages/ui 에서 vite.config.ts

import svgr from "vite-plugin-svgr";

...
plugins: [
    svgr({
      include: "**/*.svg",
      exclude: "",
    }),
    ...]

 

---

블로그 이곳 저곳 찾아가며 작성했다..

이 중에 불필요한 config 가 있다면 알려주시길 부탁드립니다