3 min read Solution

How to troubleshoot inlining SVG on vite 5

How to troubleshoot inlining SVG on vite 5
Photo by Markus Spiske / Unsplash

vite 4 에서 수개월간 멀쩡히 잘 사용하던 SVG import가 갑자기 안된다는 오류 보고를 받고 분석 시작..

해당 프로젝트는 6개월 전 vite module build + storybook 7로 셋업되었는데, 최근 vite 5 와 vite-plugin-svgr 4 로 한꺼번에 무난히 올리면서, 아래 ReactComponent 형식 변경도 잘 마무리되어 검증을 통과했던 터라, 이 부분 다시 살펴보았지만 이상 없음을 확인.

- import { ReactComponent as MailIcon } from "./assets/icons/mail.svg";
+ import MailIcon from "./assets/icons/mail.svg?react";

문제는 checkbox component에 사용된 하나의 Importing asset as URL 부분.

import ActiveIcon from "../../assets/icons/checkbox-active.svg";

...

const CheckedIcon = styled(Icon)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  backgroundImage: "url(".concat(ActiveIcon, ")"),
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center 50%",
  border: "none",
}));

로컬 디버깅 환경에서는 ActiveIcon이 URI 형태로 제공되어 문제가 없으나,

빌드 이후에는 inlined 부분이 사라지는 것을 확인.



이정도 문제면 아무리 vite 5가 출시된지 보름 남짓 밖에 되지 않는다고 해도, 커뮤니티 이슈가 컸을텐데 싶어서 검색해도 내용이 없는듯 하고, vite 빌드시 inlining 에 문제가 있나 싶어 각종 설정을 바꿔봐도 문제는 해결되지 않음.

Probably Don’t Base64 SVG | CSS-Tricks
Perhaps you’ve heard of data URIs. It’s a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you
CSS-TricksChris Coyier

Styling 자체는 처음부터 MUI 공식 문서를 참조했었기에 초기 분석 대상에 포함시키지 않았는데, 위 문서를 바탕으로 다시 MUI 문서를 면밀히 보다가 url value의 quotes가 눈에 띄어 추가하니 바로 해결.

React Checkbox component - Material UI
Checkboxes allow the user to select one or more items from a set.
Material UI
-   backgroundImage: "url(".concat(ActiveIcon, ")"),
+   backgroundImage: 'url("'.concat(ActiveIcon, '")'),

그럼 남은 질문은 vite 4 에서는 왜 문제가 발생하지 않았느냐는 것이어서, vite 5 직전 commit으로 빌드해서 돌려보니 의문이 풀림.

vite 4

Conclusion

css url value를 사용할 때 처음부터 quotes를 신경썼더라면 괜찮았을지도 모름. 아무튼 vite 5의 asset inlining을 깊게 이해할 수 있는 기회였음.

Yang Taegyu

Yang Taegyu