diff --git a/app/components/comment_component.rb b/app/components/comment_component.rb
index 9c0ecd420..eb2438d57 100644
--- a/app/components/comment_component.rb
+++ b/app/components/comment_component.rb
@@ -2,7 +2,7 @@
class CommentComponent < ApplicationComponent
attr_reader :comment, :context, :dtext_data, :current_user
- delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, to: :helpers
+ delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, to: :helpers
def initialize(comment:, current_user:, context: nil, dtext_data: nil)
@comment = comment
diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb
index 1b11545f8..701a1c40f 100644
--- a/app/components/comment_component/comment_component.html.erb
+++ b/app/components/comment_component/comment_component.html.erb
@@ -47,21 +47,21 @@
<% if votable? %>
<% end %>
diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb
index 506b5b825..787587f15 100644
--- a/app/helpers/icon_helper.rb
+++ b/app/helpers/icon_helper.rb
@@ -4,12 +4,20 @@ module IconHelper
tag.i(class: "icon #{icon_class} #{klass}", **options)
end
- def upvote_icon(**options)
- icon_tag("far fa-thumbs-up", **options)
+ def svg_icon_tag(type, path, **options)
+ tag.svg(class: "icon svg-icon #{type}", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", **options) do
+ tag.path(fill: "currentColor", d: path)
+ end
end
+ # fontawesome.com/icons/arrow-alt-up
+ def upvote_icon(**options)
+ svg_icon_tag("upvote-icon", "M272 480h-96c-13.3 0-24-10.7-24-24V256H48.2c-21.4 0-32.1-25.8-17-41L207 39c9.4-9.4 24.6-9.4 34 0l175.8 176c15.1 15.1 4.4 41-17 41H296v200c0 13.3-10.7 24-24 24z", **options)
+ end
+
+ # fontawesome.com/icons/arrow-alt-down
def downvote_icon(**options)
- icon_tag("far fa-thumbs-down", **options)
+ svg_icon_tag("downvote-icon", "M176 32h96c13.3 0 24 10.7 24 24v200h103.8c21.4 0 32.1 25.8 17 41L241 473c-9.4 9.4-24.6 9.4-34 0L31.3 297c-15.1-15.1-4.4-41 17-41H152V56c0-13.3 10.7-24 24-24z", **options)
end
def sticky_icon(**options)
diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss
index 91b380a10..f52f34264 100644
--- a/app/javascript/src/styles/base/020_base.scss
+++ b/app/javascript/src/styles/base/020_base.scss
@@ -179,6 +179,12 @@ ul.list-inline {
height: auto !important;
}
+.svg-icon {
+ display: inline-block;
+ vertical-align: middle;
+ height: 1em;
+}
+
.mobile-only {
display: none;
@media (max-width: 660px) { display: initial; }