[html] svg 높이 설정 에러

🚨 에러 발생

Error: <svg> attribute height: Expected length, "auto".

 

🧨 문제 상황

svg 파일에 width, height를 current로 설정해뒀는데 import하여 사용할 때 아래처럼 width에 값을 주고 height를 auto로 설정했더니 이런 에러가 떴다.

// icon svg
<svg width="current" height="current" ...

// component
<LogoImage width={30} height="auto" />

 

svg 파일에서 height를 auto로 바꿔보기도 했지만 문제는 여전했다.

height를 auto로 설정해서 생긴 문제인데 아이콘이 정사각형인 경우면 height를 width와 똑같이 지정하면 되지만, 직사각형인 경우에는 width를 지정한 후에 height를 몇으로 줘야 할지 알 수 없었다.

 

---

🚔 해결 방법

이전까지는 svg 파일에서 width, height를 커스텀하려면 무조건 current를 지정해야 되는 줄 알았다.

그런데 찾아보니 width, height에 100%로 지정할 수도 있었다.

그래서 width, height에 100%로 지정하고 아이콘을 import해서 사용할 때 css로 너비와 높이를 지정해줬다.

 

여태까지 svg 크기를 커스텀하려면 숫자를 직접적으로 props를 통해 넘겨야 되는 줄 알았는데 이렇게 하면 Tailwind CSS로 크기를 지정할 수 있어서 훨씬 좋은 것 같다.

// icon svg
<svg width="100%" height="100%" ...

// component
<LogoImage className="w-8 h-auto" />

 

이런 에러가 뜨지 않아도 이 방법은 Tailwind CSS를 통해 크기를 지정할 수 있으니 앞으로 svg 파일의 width, height에 current를 넣는 것보다는 100%로 해놓고 Tailwind CSS로 크기를 지정하는 방법을 선호할 것 같다.