`프론트엔드 개발자` 개형이의 벽돌집

사이드 프로젝트 진행 중에 아이콘컴포넌트가 필요하여 제작했다. 제작한 이후 스토리북에서 확인할 수 있게 추가했는데 svg파일로 된 아이콘을 불러오지 못했다. Error: Can't resolve '@/assets/icons/bookmark-outline.svg' in '내프로젝트경로' 위와 같이 에러가 발생했다. 스토리북에서 사용하는 webpack에 문제가 있는 것 같아서 확인해 본 결과, " 스토리북에서 webpack에 file loader 기본 속성으로 svg 파일을 변환하려고 함 " svg 파일 변환을 현재 내 프로젝트 환경에서 사용하고 있는 svgr을 사용하여 변환하도록 코드를 추가해 줬다. 코드 추가는 .storybook/main.ts 에서 진행한다. // ... webpackFinal: (co..

디자이너가 직접 만들어준 아이콘을 Material UI SvgIcon에 넣어 사용하고 싶었다. 차근차근 진행했던 방법을 기록해보고자 한다. 1. Material UI SvgIcon 디자이너는 나에게 svg 아이콘을 파일로 제공했다. 그래서 이 파일을 컴포넌트로 만들어 Material UI SvgIcon에 넣고 싶었다. 관련한 예제는 Material UI SvgIcon Component Prop 에서 확인할 수 있는데, import ArrowIcon from './Arrow.svg'; 위처럼 바로 적용해서 되면 참 좋겠지만, 그렇지 않았다. Svg 파일을 리액트 컴포넌트처럼 사용하기 위해서는 svgr 라이브러리가 필요했다. 끙 2. Svgr 다행히 공식문서 를 보면 쉽게 적용이 가능하다. Next.js 메..