웹사이트에서 커스텀 아이콘 사용하는 방법

아이콘을 만들 이미지를 SVG 포맷으로 저장하여 아이코문에서 불러오기

아이콘을 만들 이미지를 SVG 포맷으로 저장합니다. 이때, 저장할 이미지가 선(Stroke) 형태가 아닌 면(Fill)의 형태로 저장되어야 합니다. 그 다음 아이콘으로 만들기 위해 아래의 아이코문 웹사이트에 접속합니다.

https://icomoon.io/

[Import Icons]를 눌러서 SVG로 저장된 이미지들을 불러옵니다.

아이코문 Preferences 설정하기

SVG로 저장된 이미지를 불러왔으면 우측상단토글메뉴의 Select All 등을 클릭하여 이미지를 선택한 다음, 아래의 3개 탭에서 [Generate SVG & More] 탭을 누른 후 상단의Preferences 버튼을 클릭하여 아래와 같이 설정을 변경합니다.

• Name은 원하는 이름으로 변경할 수 있습니다.
• Add <title> to definitions in symbol-defs.svg 를 체크합니다.
• 포함할 포맷에서 PNG를 체크해제합니다.
• 아래 탭의 Download 버튼을 눌러서 Zip 파일을 다운로드 합니다.

생성된 SVG 파일을 Icon으로 사용하기

다운로드한 Zip 파일을 압축해제하면 symbol-defs.svg라는 파일을 찾을 수 있는데 이 파일을 Visual Studio Code로 연 후, fill="..." style="fill: var(--color1, ...)" 부분을 모두 삭제하고 d="..." 부분만 남겨놓습니다.