chore

rails-inspire-django · May 28, 2024 · 7fcf84f · 7fcf84f
1 parent d701771
commit 7fcf84f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 15 deletions.
diff --git a/src/django_lookbook/templates/lookbook/includes/sidebar_2_level.html b/src/django_lookbook/templates/lookbook/includes/sidebar_2_level.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 {% with preview_name=name preview=value %}
   <li data-controller="lookbook-sidebar-toggle"
       data-action="sidebar-active->lookbook-sidebar-toggle#show"
@@ -13,17 +15,23 @@
         <i style="height: 0.75rem; width: 0.75rem;"
            class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]" data-component="lookbook-icon"
            data-lookbook-sidebar-toggle-target="openArrow">
-          {% component 'svg' name='arrow-down' %}{% endcomponent %}
+          <svg>
+            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-down"></use>
+          </svg>
         </i>
 
         <i style="height: 0.75rem; width: 0.75rem;"
            class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]" data-component="lookbook-icon"
            data-lookbook-sidebar-toggle-target="closeArrow">
-          {% component 'svg' name='arrow-right' %}{% endcomponent %}
+          <svg>
+            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-right"></use>
+          </svg>
         </i>
 
         <i style="height: 0.875rem; width: 0.875rem; " class="mr-1.5 text-indigo-500 icon-stroke-2" data-component="icon">
-          {% component 'svg' name='entity' %}{% endcomponent %}
+          <svg>
+            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#layers"></use>
+          </svg>
         </i>
 
         <span class="truncate">{{ preview_name }}</span>
@@ -41,7 +49,9 @@
             <div class="flex relative items-center w-full">
               <i style="height: 0.875rem; width: 0.875rem; "
                  class="mr-1.5 text-indigo-500 icon-stroke-2" data-component="icon">
-                {% component 'svg' name='preview' %}{% endcomponent %}
+                <svg>
+                  <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#eye"></use>
+                </svg>
               </i>
               <span class="truncate">{{ example }}</span>
             </div>

diff --git a/src/django_lookbook/templates/lookbook/includes/sidebar_3_level.html b/src/django_lookbook/templates/lookbook/includes/sidebar_3_level.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 {% with group_name=value.group_name previews=value.previews %}
   <li data-controller="lookbook-sidebar-toggle"
       data-action="sidebar-active->lookbook-sidebar-toggle#show"
@@ -14,18 +16,24 @@
            class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]"
            data-component="lookbook-icon"
            data-lookbook-sidebar-toggle-target="openArrow">
-          {% component 'svg' name='arrow-down' %}{% endcomponent %}
+          <svg>
+            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-down"></use>
+          </svg>
         </i>
 
         <i style="height: 0.75rem; width: 0.75rem;"
            class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]"
            data-component="lookbook-icon"
            data-lookbook-sidebar-toggle-target="closeArrow">
-          {% component 'svg' name='arrow-right' %}{% endcomponent %}
+          <svg>
+            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-right"></use>
+          </svg>
         </i>
 
         <i style="height: 0.875rem; width: 0.875rem; " class="mr-1.5 text-indigo-500 icon-stroke-2" data-component="icon">
-          {% component 'svg' name='directory' %}{% endcomponent %}
+          <svg>
+            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#folder"></use>
+          </svg>
         </i>
 
         <span class="truncate">{{ group_name }}</span>
@@ -49,18 +57,24 @@
                  class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]"
                  data-component="lookbook-icon"
                  data-lookbook-sidebar-toggle-target="openArrow">
-                {% component 'svg' name='arrow-down' %}{% endcomponent %}
+                <svg>
+                  <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-down"></use>
+                </svg>
               </i>
 
               <i style="height: 0.75rem; width: 0.75rem;"
                  class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]"
                  data-component="lookbook-icon"
                  data-lookbook-sidebar-toggle-target="closeArrow">
-                {% component 'svg' name='arrow-right' %}{% endcomponent %}
+                <svg>
+                  <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-right"></use>
+                </svg>
               </i>
 
               <i style="height: 0.875rem; width: 0.875rem; " class="mr-1.5 text-indigo-500 icon-stroke-2" data-component="icon">
-                {% component 'svg' name='entity' %}{% endcomponent %}
+                <svg>
+                  <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#layers"></use>
+                </svg>
               </i>
 
               <span class="truncate">{{ preview_name }}</span>
@@ -79,7 +93,9 @@
                   <div class="flex relative items-center w-full">
                     <i style="height: 0.875rem; width: 0.875rem; "
                        class="mr-1.5 text-indigo-500 icon-stroke-2" data-component="icon">
-                      {% component 'svg' name='preview' %}{% endcomponent %}
+                      <svg>
+                        <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#eye"></use>
+                      </svg>
                     </i>
                     <span class="truncate">{{ example }}</span>
                   </div>

diff --git a/src/django_lookbook/templates/lookbook/includes/sidebar_previews.html b/src/django_lookbook/templates/lookbook/includes/sidebar_previews.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <div
   data-controller="lookbook-preview-filter"
   data-action="lookbook-filter-input:preview-filter->lookbook-preview-filter#filter"
@@ -19,7 +21,9 @@
         data-lookbook-filter-input-target="clearButton"
       >
         <i style="height: 0.75rem; width: 0.75rem; " class="icon-stroke-2" data-component="icon">
-          {% component 'svg' name='x-mark' %}{% endcomponent %}
+          <svg>
+            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#x"></use>
+          </svg>
         </i>
       </button>
     </div>

diff --git a/src/django_lookbook/templates/lookbook/inspect.html b/src/django_lookbook/templates/lookbook/inspect.html
@@ -1,5 +1,7 @@
 {% extends 'lookbook/base.html' %}
 
+{% load static %}
+
 {% block content%}
 
   <div id="inspector"
@@ -70,7 +72,9 @@
                 aria-label="Copy preview URL"
               >
                 <i style="height: 1.0rem; width: 1.0rem; " class="icon-stroke-2" data-component="icon">
-                  {% component 'svg' name='link' %}{% endcomponent %}
+                  <svg>
+                    <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#link"></use>
+                  </svg>
                 </i>
               </button>
 
@@ -86,7 +90,9 @@
                 <i style="height: 1.0rem; width: 1.0rem; "
                    class="icon-stroke-2"
                    data-component="icon">
-                  {% component 'svg' name='refresh' %}{% endcomponent %}
+                  <svg>
+                    <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#refresh-cw"></use>
+                  </svg>
                 </i>
               </button>
 
@@ -101,7 +107,9 @@
               >
                 <i style="height: 1.0rem; width: 1.0rem; " class="icon-stroke-2"
                    data-component="icon">
-                  {% component 'svg' name='open-new-tab' %}{% endcomponent %}
+                  <svg>
+                    <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#external-link"></use>
+                  </svg>
                 </i>
               </a>