마지막 업데이트 : 2022년 04월 14일
조회수 : 

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

아이콘을 만들 이미지를 SVG 포맷으로 저장하여 아이코문에서 불러오기 아이콘을 만들 이미지를 SVG 포맷으로 저장합니다. 이때, 저장할 이미지가 선(Stroke) 형태가 아닌 면(Fill)의 형태로 저장되어야 합니다. 그 다음 아이콘으로 만들기 위해 아래의 […]
Written by: doogak

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

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

https://icomoon.io/

아이코문에서 아이콘 Import하기

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

아이코문 Preferences 설정하기

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

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

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

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

svg파일을 VSCode로 편집하기
power-switchmagnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram