Добавление поддержки Alpine.js в пакет Django

Я использую пакет, который добавляет тег шаблона SVG для вставки SVG в мои шаблоны Django. Я форкнул проект и добавил поддержку передачи атрибутов HTML в SVG. Так что сейчас я могу использовать его следующим образом:

    {% load svg %}

    <a class="font-semibold text-gray-850 href="#0">
       {% svg 'icon-chevron-down' class="inline -mb-0.5 w-4 h-4 ml-0.5 transition-transform duration-200 transform fill-current text-gray-400" %}
    </a>

Но я сталкиваюсь с проблемой, когда хочу использовать Alpine.js внутри svg. Я хотел бы иметь возможность сделать что-то вроде этого:

{% svg 'icon-chevron-down' :class="{'rotate-180': open, 'rotate-0': !open}" class="inline -mb-0.5 w-4 h-4 ml-0.5 transition-transform duration-200 transform fill-current text-gray-400" %}

Как я могу заставить его работать?

Репо для моего пакета: https://github.com/xshapira/django-simple-svg

svg.py

from __future__ import absolute_import
import logging
import os

from django import template
from django.conf import settings
from django.contrib.staticfiles import finders
from django.core.exceptions import ImproperlyConfigured
from django.utils.safestring import mark_safe

from simple_svg.exceptions import SVGNotFound

logger = logging.getLogger(__name__)
register = template.Library()


@register.simple_tag
def svg(filename, *args, **kwargs):
    SVG_DIRS = getattr(settings, "SVG_DIRS", [])

    if type(SVG_DIRS) != list:
        raise ImproperlyConfigured("SVG_DIRS setting must be a list")

    path = None

    if SVG_DIRS:
        for directory in SVG_DIRS:
            svg_path = os.path.join(
                directory, "{filename}.svg".format(filename=filename)
            )

            if os.path.isfile(svg_path):
                path = svg_path
    else:
        path = finders.find(
            os.path.join("svg", "{filename}.svg".format(filename=filename)), all=True
        )

    if not path:
        message = "SVG '{filename}.svg' not found".format(filename=filename)

        # Raise exception if DEBUG is True, else just log a warning.
        if settings.DEBUG:
            raise SVGNotFound(message)
        else:
            logger.warning(message)
            return ""

    # Sometimes path can be a list/tuple if there's more than one file found
    if isinstance(path, (list, tuple)):
        path = path[0]

    with open(path) as svg_file:
        svg = svg_file.read()

    if kwargs:
        attributes = " ".join(['{}="{}"'.format(k, v) for k, v in kwargs.items()])
        svg = svg.replace("<svg", "<svg " + attributes)

    svg = mark_safe(svg)

    return svg

tests.py

import os
from django.conf import settings
from django.core.exceptions import ImproperlyConfigured
from django.template import Context, Template
from django.test.testcases import SimpleTestCase

from simple_svg.exceptions import SVGNotFound


def test_should_support_attributes(self):
        svg_file = open(
            os.path.join(settings.BASE_DIR, "static", "svg", "django.svg")
        ).read()
        template = Template("{% load svg %}{% svg 'django' id='logo' class='large' %}")

        self.assertNotEqual(svg_file, template.render(Context()))
        self.assertIn('id="logo"', template.render(Context()))
        self.assertIn('class="large"', template.render(Context()))

Простое решение

Я нашел лучший способ сделать это, ничего не меняя в пакете Django. Мы просто можем обернуть тег svg тегом div и применить к нему выражения class и Alpine.js. Вот пример:

<div :class="{'rotate-180': open, 'rotate-0': !open}" class="inline -mb-0.5 w-4 h-4 ml-0.5 transition-transform duration-200 transform fill-current text-gray-400">
  {% svg 'icon-chevron-down' %}
</div>
Вернуться на верх