[UI] Switch to Lucide icons for the main menu (#891)

app/helpers/application_helper.rb

@@ -24,7 +24,7 @@ module ApplicationHelper
 
     tag.li(id: id, class: klass) do
       link_to(url, id: "#{id}-link", **options) do
-        concat tag.i(class: icon)
+        concat svg_icon(icon)
         concat " "
         concat tag.span(text)
       end

app/helpers/icon_helper.rb

@@ -1,7 +1,23 @@
 # frozen_string_literal: true
 
 module IconHelper
+  # https://lucide.dev/
   PATHS = {
+    # Navigation
+    hamburger: %(<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>),
+    brush: %(<path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"/>),
+    images: %(<path d="M18 22H4a2 2 0 0 1-2-2V6"/><path d="m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18"/><circle cx="12" cy="8" r="2"/><rect width="16" height="16" x="6" y="2" rx="2"/>),
+    library: %(<path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/>),
+    group: %(<path d="M3 7V5c0-1.1.9-2 2-2h2"/><path d="M17 3h2c1.1 0 2 .9 2 2v2"/><path d="M21 17v2c0 1.1-.9 2-2 2h-2"/><path d="M7 21H5c-1.1 0-2-.9-2-2v-2"/><rect width="7" height="5" x="7" y="7" rx="1"/><rect width="7" height="5" x="10" y="12" rx="1"/>),
+    tags: %(<path d="m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19"/><path d="M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="6.5" cy="9.5" r=".5" fill="currentColor"/>),
+    megaphone: %(<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>),
+    message_square: %(<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>),
+    lectern: %(<path d="M16 12h3a2 2 0 0 0 1.902-1.38l1.056-3.333A1 1 0 0 0 21 6H3a1 1 0 0 0-.958 1.287l1.056 3.334A2 2 0 0 0 5 12h3"/><path d="M18 6V3a1 1 0 0 0-1-1h-3"/><rect width="8" height="12" x="8" y="10" rx="1"/>),
+
+    swatch: %(<path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/><path d="M 7 17h.01"/><path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/>),
+    settings: %(<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>),
+    log_in: %(<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/>),
+
     # Pagination
     chevron_left: %(<path d="m15 18-6-6 6-6"/>),
     chevron_right: %(<path d="m9 18 6-6-6-6"/>),

app/javascript/src/styles/common/navigation.scss

@@ -69,8 +69,6 @@ nav.navigation {
         color: themed("color-link-active");
         border-radius: 0.25rem;
         white-space: nowrap;
-
-        i { font-size: 1.5rem; }
       }
 
       &:hover > span, &:active > span { background: themed("color-section"); }
@@ -150,10 +148,9 @@ nav.navigation {
 
           white-space: nowrap;
 
-          i {
-            width: 1.5rem;
+          svg {
+            margin: -0.25rem 0;
             color: themed("color-link-active");
-            text-align: center;
           }
         }
       }
@@ -389,7 +386,7 @@ nav.navigation, html.nav-toggled nav.navigation {
 
       li a {
         border-bottom: 0;
-        i { display: none; }
+        svg { display: none; }
       }
     }
 
@@ -447,8 +444,12 @@ nav.navigation, html.nav-toggled nav.navigation {
         a {
           padding: 0 0.5rem;
 
-          i { color: themed("color-link"); }
-          &:hover i { color: themed("color-link-hover"); }
+          svg {
+            color: themed("color-link");
+            height: 1.25rem;
+            width: 1.25rem;
+          }
+          &:hover svg { color: themed("color-link-hover"); }
         }
 
         &.nav-tools-themes, &.nav-tools-settings {

app/views/layouts/_main_links.html.erb

@@ -1,8 +1,8 @@
-<%= decorated_nav_link_to("Artists", "fas fa-brush", artists_path) %>
-<%= decorated_nav_link_to("Posts", "fas fa-images", posts_path) %>
-<%= decorated_nav_link_to("Pools", "fas fa-book", gallery_pools_path) %>
-<%= decorated_nav_link_to("Sets", "fas fa-clone", post_sets_path) %>
-<%= decorated_nav_link_to("Tags", "fas fa-tags", tags_path) %>
-<%= decorated_nav_link_to("Blips", "fas fa-bullhorn", blips_path) %>
-<%= decorated_nav_link_to("Comments", "fas fa-comment-alt", comments_path(group_by: "post")) %>
-<%= decorated_nav_link_to("Forum", "fas fa-chalkboard", forum_topics_path, class: (CurrentUser.has_forum_been_updated? ? "forum-updated" : nil)) %>
+<%= decorated_nav_link_to("Artists", :brush, artists_path) %>
+<%= decorated_nav_link_to("Posts", :images, posts_path) %>
+<%= decorated_nav_link_to("Pools", :library, gallery_pools_path) %>
+<%= decorated_nav_link_to("Sets", :group, post_sets_path) %>
+<%= decorated_nav_link_to("Tags", :tags, tags_path) %>
+<%= decorated_nav_link_to("Blips", :megaphone, blips_path) %>
+<%= decorated_nav_link_to("Comments", :message_square, comments_path(group_by: "post")) %>
+<%= decorated_nav_link_to("Forum", :lectern, forum_topics_path, class: (CurrentUser.has_forum_been_updated? ? "forum-updated" : nil)) %>

app/views/layouts/_nav.html.erb

@@ -16,7 +16,7 @@
 
   <menu class="nav-controls desktop">
     <a role="button" href="" id="nav-toggle" class="nav-controls-toggle">
-      <span><i class="fas fa-bars"></i></span>
+      <span><%= svg_icon(:hamburger) %></span>
     </a>
     <% if CurrentUser.is_anonymous? %>
       <a href="<%= new_session_path %>" class="simple-avatar nav-controls-profile collapse-2">
@@ -25,7 +25,7 @@
             Sign In
           </span>
           <span class="simple-avatar-image">
-            <i class="fas fa-sign-in-alt"></i>
+            <%= svg_icon(:log_in) %>
           </span>
         </span>
       </a>
@@ -35,9 +35,9 @@
   </menu>
 
   <menu class="nav-tools desktop <%= CurrentUser.is_anonymous? ? "anonymous" : "" %>">
-    <%= decorated_nav_link_to("Themes", "fas fa-swatchbook", theme_path, class: "nav-tools-themes") %>
+    <%= decorated_nav_link_to("Themes", :swatch, theme_path, class: "nav-tools-themes") %>
     <% unless CurrentUser.is_anonymous? %>
-      <%= decorated_nav_link_to("Settings", "fas fa-cog", edit_user_path(CurrentUser.user), class: "nav-tools-settings") %>
+      <%= decorated_nav_link_to("Settings", :settings, edit_user_path(CurrentUser.user), class: "nav-tools-settings") %>
     <% end %>
   </menu>