SweetAlert은 자바스크립트로 작성된 팝업 알림 창을 보다 쉽게 만들 수 있게 도와주는 라이브러리입니다. 이 라이브러리를 사용하여 팝업 창을 띄울 때, 기본 아이콘 외에 커스텀 아이콘을 설정하는 방법을 알아보겠습니다.

1. 아이콘 파일 준비

우선, SweetAlert에 사용할 커스텀 아이콘을 준비해야 합니다. 이 아이콘은 이미지 파일로 제공되어야 하며, 일반적으로 PNG 또는 SVG 형식을 많이 사용합니다. 준비된 아이콘 파일을 프로젝트 폴더에 저장해주세요.

2. 아이콘 파일 경로 설정

SweetAlert을 호출하는 스크립트에서 아이콘 파일의 경로를 설정해야 합니다. 파일 경로는 아이콘 파일이 실제로 저장된 위치를 기준으로 설정해야 합니다. 예를 들어, 아이콘 파일이 images 폴더에 저장되어 있다면, 파일 경로는 “images/custom-icon.png”와 같은 형태가 될 것입니다.

3. SweetAlert 호출 시 커스텀 아이콘 설정

이제 SweetAlert을 호출하는 스크립트에서 커스텀 아이콘을 설정할 수 있습니다. SweetAlert의 icon 옵션에 사용할 아이콘 파일 경로를 설정하면 됩니다. 예를 들어, PNG 형식의 커스텀 아이콘을 사용하고 싶다면 아래와 같이 코드를 작성할 수 있습니다.

swal({
  title: "알림",
  text: "커스텀 아이콘 예제",
  icon: "images/custom-icon.png"
});

위 코드에서 images/custom-icon.png는 실제로 준비한 커스텀 아이콘 파일의 경로로 변경해야 합니다.

SweetAlert은 다양한 아이콘을 지원하므로, 필요에 따라 원하는 아이콘 파일을 준비하여 사용하면 됩니다. 아이콘 파일의 크기와 모양은 해당 파일 형식에 맞게 작성해야 합니다.

참고 링크

• SweetAlert 라이브러리: https://sweetalert.js.org/
• SweetAlert 커스터마이징 가이드: https://sweetalert.js.org/guides/
• 아이콘 파일 제작 사이트: https://www.flaticon.com/