[html] svg 높이 설정 에러

2024. 10. 21. 15:47·Trouble Shooting
반응형

🚨 에러 발생

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로 크기를 지정하는 방법을 선호할 것 같다.

반응형

'Trouble Shooting' 카테고리의 다른 글

[React] svgr 세팅 - Duplicate identifier 'src'.  (0) 2024.11.14
[Next.js] React Hydration Error  (0) 2024.10.21
[yarn] yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\yarn.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.  (0) 2024.09.13
[Spring] Name for argument of type [java.lang.String] not specified, and parameter name information not available via reflection. Ensure that the compiler uses the '-parameters' flag.  (2) 2024.04.23
'Trouble Shooting' 카테고리의 다른 글
  • [React] svgr 세팅 - Duplicate identifier 'src'.
  • [Next.js] React Hydration Error
  • [yarn] yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\yarn.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
  • [Spring] Name for argument of type [java.lang.String] not specified, and parameter name information not available via reflection. Ensure that the compiler uses the '-parameters' flag.
올콩
올콩
콩 심은 데 콩 난다
  • 올콩
    콩스토리
    올콩
  • 전체
    오늘
    어제
    • 분류 전체보기 (191) N
      • SSAFY (10)
      • Algorithm (111) N
        • 이론 (6)
        • 백준 (BOJ) (104) N
        • 프로그래머스 (1)
      • Trouble Shooting (9)
      • Frontend (6)
      • React (17)
      • Next.js (3)
      • Vue (4)
      • Node.js (2)
      • HTML (9)
      • DevOps (3)
        • Git (3)
      • Language (9)
        • JavaScript (0)
        • Java (9)
      • Embedded (1)
      • CS (5)
        • Network (1)
        • Blockchain (4)
      • 자격증 (2)
  • 블로그 메뉴

    • GitHub
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    순열
    재귀
    React
    html5
    중복순열
    힙
    파이썬
    Heap
    알고리즘
    Algorithm
    SSAFYcial
    강의
    티스토리챌린지
    Next.js
    DP
    SSAFY
    dfs
    우선순위큐
    싸피
    중복조합
    블록체인
    Error
    백트래킹
    수학
    bfs
    백준
    오블완
    구현
    Java
    브루트포스
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
올콩
[html] svg 높이 설정 에러
상단으로

티스토리툴바