diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index ba6aba93a..d8cc321d8 100644
--- a/app/helpers/application_helper.rb
+++ b/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
diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb
index ab216e857..f5f919320 100644
--- a/app/helpers/icon_helper.rb
+++ b/app/helpers/icon_helper.rb
@@ -1,7 +1,23 @@
# frozen_string_literal: true
module IconHelper
+ # https://lucide.dev/
PATHS = {
+ # Navigation
+ hamburger: %(),
+ brush: %(),
+ images: %(),
+ library: %(),
+ group: %(),
+ tags: %(),
+ megaphone: %(),
+ message_square: %(),
+ lectern: %(),
+
+ swatch: %(),
+ settings: %(),
+ log_in: %(),
+
# Pagination
chevron_left: %(),
chevron_right: %(),
diff --git a/app/javascript/src/styles/common/navigation.scss b/app/javascript/src/styles/common/navigation.scss
index cf1e76fb9..7f3581411 100644
--- a/app/javascript/src/styles/common/navigation.scss
+++ b/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 {
diff --git a/app/views/layouts/_main_links.html.erb b/app/views/layouts/_main_links.html.erb
index 30e39838a..58373063a 100644
--- a/app/views/layouts/_main_links.html.erb
+++ b/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)) %>
diff --git a/app/views/layouts/_nav.html.erb b/app/views/layouts/_nav.html.erb
index ea0e84561..d306a09b1 100644
--- a/app/views/layouts/_nav.html.erb
+++ b/app/views/layouts/_nav.html.erb
@@ -16,7 +16,7 @@