Icon Editing Guide

SVG 형태의 아이콘이 주로 사용되며, 사용자의 필요에 맞게 아이콘을 손쉽게 교체하고 스타일을 수정할 수 있습니다.

아이콘 교체 방법

예시로 주어진 코드처럼 SVG 아이콘을 찾으신 후, 아래 방법으로 아이콘을 교체할 수 있습니다.

<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>

1. 아이콘 위치 확인

   • 변경할 아이콘의 위치를 파악하기 위해, 주변 텍스트나 레이아웃을 기준으로 아이콘의 위치를 확인하세요.

2. 새로운 아이콘 찾기

   • 원하는 아이콘은 다음 사이트에서 찾을 수 있습니다:
     • Bootstrap Icons
     • Heroicons
   • 새로운 아이콘을 선택하여 SVG 코드를 복사하세요.

3. 아이콘 교체

   • 기존 아이콘 코드를 삭제하고, 새 아이콘의 SVG 코드를 붙여넣기만 하면 완료됩니다.

아이콘 스타일 변경 방법

아이콘의 색상이나 크기와 같은 속성은 클래스 속성 또는 SVG 자체의 속성을 통해 조정할 수 있습니다.

• 색상 변경

  • 텍스트 색상: text-white, text-black, text-[#2e2e2e]와 같이 클래스에 색상을 지정할 수 있습니다.
  • 채워진 색상 (Fill): SVG나 path의 fill 속성을 currentColor로 설정하면 클래스의 텍스트 색상이 적용됩니다.
  • 선 색상 (Stroke): stroke 속성을 currentColor로 설정하면 선 색상을 클래스에서 지정한 색상으로 변경할 수 있습니다.

• 크기 변경

  • 크기는 w-6 h-6 형식으로 클래스에서 w와 h 값으로 조절할 수 있습니다. 예를 들어 w-8 h-8로 수정하여 아이콘 크기를 키울 수 있습니다.

이 방법을 통해 고객이 원하는 대로 아이콘을 자유롭게 교체하고 스타일을 조정해보세요.