아이콘¶

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

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

# 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 훅으로 아이콘을 추가하세요.

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

Wagtail의 기본 아이콘 대부분은 16x16 viewBox에 그려졌으며, FontAwesome v6 무료 아이콘 세트에서 가져왔습니다.

아이콘 템플릿 태그¶

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

{% load wagtailadmin_tags %}
{% icon name="toucan" classname="..." title="..." %}

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

@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/ 에 위치시키세요.

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

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

사용 가능한 아이콘¶

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

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