# 아이콘

## 사용방법

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F3elvf5QG9DPCzXUaoncU%2Ficon.png?alt=media&#x26;token=fbe755e7-573f-4c95-b076-ce6734a7b922" alt=""><figcaption></figcaption></figure>

1. 좌측 컨트롤 선택 탭에서 텍스트 혹은 버튼 컨트롤을 삽입합니다.
2. \[<img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FVde58UhJVm3AaWRK7OhF%2Fimage.png?alt=media&#x26;token=3fd70726-2cff-4c1b-a7cc-b2601fd11cad" alt="" data-size="line">] 옵션을 체크하여 원하는 아이콘, 사이즈, 배치, [color](https://docs.flextudio.com/flextudio/scenario/design-mode/color "mention")을 설정합니다.&#x20;

{% hint style="warning" %}
색상 아이콘을 선택한 경우 라인색을 지정할 수 없어요.
{% endhint %}

## 기능설명

<table><thead><tr><th width="124">모양</th><th width="112">기능</th><th width="147">속성</th><th>의미</th></tr></thead><tbody><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FPSYHuoeDEtkioO2Y68Fr%2Fimage.png?alt=media&#x26;token=268e0da0-24f2-44b8-9d4b-f4a8b0be50fa" alt="" data-size="line"></td><td>아이콘 선택</td><td></td><td>아이콘 모양을 선택</td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FsTPV9xhZ2lhVmfjtNjs8%2Fimage.png?alt=media&#x26;token=234f73c3-71ba-4dc0-a736-571043a12739" alt="" data-size="original"></td><td><a data-mention href="color">color</a></td><td>테마, Hex</td><td>아이콘 라인 컬러를 변경 </td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fq8Cw0XAKuYD33CoheRHu%2Fimage.png?alt=media&#x26;token=2aed7212-5771-4de8-a5b2-6b6fb6184fc3" alt="" data-size="line"></td><td>사이즈</td><td>px(픽셀)</td><td>아이콘 사이즈를 숫자로 입력하여 변경 (기본 30px)</td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FupGWzlKYkZGKbgG15YPk%2Fimage.png?alt=media&#x26;token=13afb79a-191f-4ac5-98c6-8cac4cd631d4" alt="" data-size="original"></td><td>아이콘 위치</td><td>좌측</td><td>텍스트 좌측에 아이콘 정렬</td></tr><tr><td></td><td></td><td>우측</td><td>텍스트 우측에 아이콘 정렬</td></tr><tr><td></td><td></td><td>상단</td><td>텍스트 상단에 아이콘 정렬</td></tr><tr><td></td><td></td><td>하단</td><td>텍스트 하단에 아이콘 정렬</td></tr></tbody></table>

## 아이콘 설정이 가능한 컨트롤

<table><thead><tr><th width="91">모양</th><th width="148">기능</th><th>설명</th></tr></thead><tbody><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FgzeQY8gUOGnyAjXwCpXm%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-04-12%2015.46.43.png?alt=media&#x26;token=3a8bf074-3609-431d-a361-2315c73779a6" alt="" data-size="line"></td><td>텍스트(Text)</td><td>앱 제작에 필요한 텍스트를 입력할 수 있는 컨트롤</td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FgY1WTKXqdx9wSRfw2c0e%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-04-12%2015.49.08.png?alt=media&#x26;token=6330c747-bf32-4d8b-b8f8-f4379e16b90a" alt="" data-size="line"></td><td>버튼(Button)</td><td>앱 제작에 필요한 버튼을 입력할 수 있는 컨트롤</td></tr></tbody></table>

## 따라하기

화면 속 \[시작하기]버튼을 눌러 데모를 확인하실 수 있습니다.

{% @storylane/embed subdomain="app" linkValue="wtnl6utlm0nz" url="<https://app.storylane.io/share/wtnl6utlm0nz>" %}