[TIL] Next.js에서 SVG 파일 에러 (삽질기)

 

◎ Next.js 에서 이미지 불러오는 게 이렇게 힘든 것인가... 아니면 내가 못하는 건가..

svg 파일 불러오는데 시간을 많이 투자했다.

svg파일을 사용하면서 삽질기와 배운 것을 적겠다.

 

1. babel-plugin-inline-react-svg

◎ SVG 파일을 가져오려면 React Components로 변환하고 SVGO를 사용하여 SVG를 최적화해야 한다.

npm install --save-dev babel-plugin-inline-react-svg

 

2. .babelrc 에 추가

◎ .barbelrc에 inline-react-svg 플러그인을 추가한다.

{
  "plugins": [
    "inline-react-svg"
  ]
}

 

3.  Waring: Invalid attribute name: `'data-name'` 에러

 

 

component에서 .svg 자체를 import 하면 svg파일이 잘 적용되지만 위의 같은 에러가 발생한다.

그 이유는 data-name 속성이 유효하지 않는다 라고 뜬다.

해결하는 방법을 찾아보다가 하나의 방법을 찾아냈다.

 

How to import svg into Next.js component?

 

svg 파일을 컴포넌트화 시켜서 svg를 사용해야 하는 컴포넌트에  컴포넌트화 시킨 svg를 import 하면 에러가 사라진다.

하지만 data-name 속성 하나로 해당 아이콘.tsx 컴포넌트로 만드는 건 비효율적이라고 생각한다.

그래서 검색하다 다른 방식을 찾았다.

4. .barbelrc 수정

◎ .barbelrc에 적용을 하였지만 추가적으로 data-name 속성을 remove 해줄 수 있는 옵션을 찾았다.

{
  "plugins": [
    [
      "inline-react-svg",
      { 
        "svgo": {
          "plugins": [
            {
              "removeAttrs": { "attrs": "(data-name)" }
            },
            {
              "cleanupIDs": true
            }
          ]
        }
      }
    ]
  ]
}

이렇게 하면 적용하면 처음 발생했던 data-name 속성이 있는 svg도 에러 없이 잘 해결된다.

 

babel-plugin-inline-react-svg

※ 추가적으로 폰트를 설정할 때 폰트 파일은 무조건 public에 위치하여야 한다. 안 그러면 Not Found 에러가 발생한다.