Fixy image tags

onlylegs/static/sass/components/tags.sass

@@ -1,11 +1,11 @@
 .tag-icon
     margin: 0
-    padding: 0.25rem 0.5rem
+    padding: 0.3rem 0.5rem
 
     display: flex
-    align-items: center
+    align-items: flex-end
     justify-content: center
-    gap: 0.25rem
+    gap: 0.3rem
 
     font-size: 0.9rem
     font-weight: 500
@@ -19,9 +19,8 @@
     cursor: pointer
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
 
-    svg
-        width: 1.15rem
-        height: 1.15rem
+    i
+        font-size: 1.15rem
 
     &:hover
-        background-color: RGBA($primary, 0.3)
+        background-color: RGBA($primary, 0.2)

onlylegs/templates/image.html

@@ -167,8 +167,7 @@
                         <div class="img-groups">
                             {% for group in image.groups %}
                                 <a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z"></path></svg>
-                                    {{ group['name'] }}
+                                    <i class="ph ph-package"></i>{{ group['name'] }}
                                 </a>
                             {% endfor %}
                         </div>