에러로그
아이콘 이미지와 메뉴명을 같이 사용하는 하단 네비게이션 바 구현 중, 이미지아이콘을 SVG링크로 복사하여 사용할 때에 이미지가 겹치는 일이 발생했다. 프로젝트에서 icons 폴더내에 각각의 파일들로 svg링크들을 보관하여 사용하고 있었고, import 경로도 각각 파일로 확실했는데 어디가 틀린지 몰라서 한참 고민했다 ㅠㅠ 심지어 미리보기에서도 각 이미지가 제대로 출력되었다. 이거 확인하려고 svg미리보는 확장팩까지 깔았다.
나의 멋진 해결
알고보니 이런 현상이 발생하는 이유가 SVG 링크의 id가 제일 처음 올린 id와 중복되어서 발생한 에러였다. id가 한가지로 지정되어있었기때문에 해당 아이디를 갖고 있는 홈 이미지만 출력됐던 것이였다.
요렇게 SVG 링크는 각각의 pattern id 를 갖게 되는데 네비바 컴포넌트 파일 내에서 사용한 SVG파일들은 각 패턴 아이디가 pattern0으로 동일했기에 제일 처음의 이미지만 나왔던 것이었던 것이었다.. 각 패턴 아이디를 유니크하게 설정해주면 에러는 해결된다. 생각보다 간단했지만 내가 잘못한게 없었기에 에러찾기 힘들었다ㅠㅠ 아이디를 수정해주면 아래와 같이 다른 아이콘들이 이쁘게 출력된다!
내가 한 삽질
하지만 이번에도.. 삽질을 한게 있었는데,,,, 바로 pattern id를 수정했으면 fill 부분도 수정해주어야한다는 점이다.. 처음에는 아이디값만 수정했어서 이미지가 죄다 빈 이미지로 나왔었다. 놀랍게도 실화,,
이렇게 id 부분과 fill 부분을 잘 맞춰주면 겹침 현상 없이 각각의 이미지로 잘 출력된다
