(icons)=

# 아이콘

Wagtail은 SVG 아이콘 세트와 함께 제공됩니다. 이 아이콘들은 관리자 인터페이스 전반에 걸쳐 사용됩니다.

아이콘을 사용하는 요소는 다음과 같습니다:

-   [관리자 메뉴 항목 등록](register_admin_menu_item)
-   [클라이언트 사이드 React 컴포넌트](extending_client_side_react)
-   [리치 텍스트 편집기 툴바 버튼](extending_the_draftail_editor)
-   [스니펫](wagtailsnippets_icon)
-   [StreamField 블록](custom_streamfield_blocks)

이 문서는 아이콘을 선택, 추가 및 사용자 정의하는 방법을 설명합니다.

## 사용자 정의 아이콘 추가하기

아이콘을 그리거나 다운로드하여 템플릿 폴더에 저장하세요:

```xml
# app/templates/app_name/toucan.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" id="icon-toucan">
  <!--! CC0 license. https://creativecommons.org/publicdomain/zero/1.0/ -->
  <path d="M321 662v1a41 41 0 1 1-83-2V470c0-129 71-221 222-221 122 0 153-42 153-93 0-34-18-60-53-72v-4c147 23 203 146 203 257 0 107-80 247-277 247v79a41 41 0 1 1-82-1v46a41 41 0 0 1-83 0v-46Z"/>
  <path d="M555 136a23 23 0 1 0-46 0 23 23 0 0 0 46 0Zm-69-57H175c-60 0-137 36-137 145l9-8 367 6 72 18V79Z"/>
</svg>
```

`<svg>` 태그는 다음을 준수해야 합니다:

-   `id="icon-<name>"` 속성을 설정하세요. 아이콘은 이 `name` 으로 참조됩니다. `name` 은 소문자, 숫자, 하이픈만 포함해야 합니다.
-   `xmlns="http://www.w3.org/2000/svg"` 속성을 설정하세요.
-   `viewBox="..."` 속성을 설정하고, `width` 및 `height` 속성은 설정하지 마세요.
-   오른쪽에서 왼쪽으로 쓰는(RTL) 언어에서 아이콘을 미러링해야 하는 경우, `class="icon--directional"` 속성을 설정하세요.
-   해당하는 경우, 라이선스/출처 정보를 `<!--! -->` HTML 주석 안에 포함하세요.

아이콘 색상이 사용처에 따라 변경되도록 `fill="currentColor"` 를 설정하거나 `fill` 속성을 제거하세요.

`register_icons` 훅으로 아이콘을 추가하세요.

```python
@hooks.register("register_icons")
def register_icons(icons):
    return icons + ['app_name/toucan.svg']
```

Wagtail의 기본 아이콘 대부분은 16x16 viewBox에 그려졌으며, [FontAwesome v6 무료 아이콘 세트](https://fontawesome.com/v6/search?m=free)에서 가져왔습니다.

## 아이콘 템플릿 태그

사용자 정의 템플릿에서 아이콘을 사용하세요:

```html+django
{% load wagtailadmin_tags %}
{% icon name="toucan" classname="..." title="..." %}
```

## 훅을 통해 아이콘 변경하기

```python
@hooks.register("register_icons")
def register_icons(icons):
    icons.remove("wagtailadmin/icons/time.svg")  # 원본 아이콘 제거
    icons.append("path/to/time.svg")  # 새 아이콘 추가
    return icons
```

## 템플릿 오버라이드를 통해 아이콘 변경하기

여러 애플리케이션이 동일한 템플릿의 다른 버전을 제공할 때, `INSTALLED_APPS` 에 먼저 나열된 애플리케이션이 우선권을 가집니다.

`INSTALLED_APPS` 에서 여러분의 앱을 Wagtail 관련 앱들보다 앞에 위치시키세요.

Wagtail 아이콘은 `wagtail/admin/templates/wagtailadmin/icons/` 에 있습니다.
자신만의 SVG 파일은 `<your_app>/templates/wagtailadmin/icons/` 에 위치시키세요.

(custom_icons_userbar)=

### 사용자 바에서 사용자 정의 아이콘 사용하기

사용자 바는 로그인했을 때 페이지 뷰 내에서 빠른 작업을 제공합니다. 사용자 바에 표시되는 항목을 사용자 정의하려면 [`construct_wagtail_userbar`](construct_wagtail_userbar) 훅을 사용할 수 있습니다. 이 메뉴 항목 내에서 사용자 정의 아이콘을 사용하려면 해당 아이콘이 올바른 템플릿에서 사용 가능해야 합니다.

```html+django
{# <yourapp>/templates/wagtailadmin/userbar/base.html #}
{% extends "wagtailadmin/userbar/base.html" %}

{% block icons %}
    {{ block.super }}
    {% include "wagtailadmin/icons/toucan.svg" %}
{% endblock %}
```

(available_icons)=

## 사용 가능한 아이콘

[스타일 가이드](styleguide)를 활성화하여 특정 프로젝트에서 사용 가능한 아이콘과 그 이름을 확인하세요.

기본적으로 사용 가능한 모든 아이콘은 다음과 같습니다:

<details open="">

<summary>아이콘 표 토글</summary>

```{include} ../_static/wagtail_icons_table.txt

```

</details>