Use crayons_icon_tag for article views (#16071)

app/views/articles/_actions.html.erb

@@ -30,7 +30,7 @@
     <div id="mod-actions-menu-btn-area" class="print-hidden hidden align-center"></div>
     <div class="align-center m:relative">
       <button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="<%= t("views.actions.more.aria_label") %>">
-        <%= inline_svg_tag("overflow-horizontal.svg", aria_hidden: true, class: "dropdown-icon crayons-icon", title: t("views.actions.more.title")) %>
+        <%= crayons_icon_tag("overflow-horizontal", css_class: "dropdown-icon", aria_hidden: true, title: t("views.actions.more.title")) %>
       </button>
 
       <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset">
@@ -40,7 +40,7 @@
             class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0"
             data-postUrl="<%= article_url(@article) %>">
             <span class="fw-bold"><%= t("views.actions.copy.button") %></span>
-            <%= inline_svg_tag("copy.svg", aria_hidden: true, id: "article-copy-icon", class: "crayons-icon mx-2 shrink-0", title: t("views.actions.copy.button")) %>
+            <%= crayons_icon_tag(:copy, css_class: "mx-2 shrink-0", id: "article-copy-icon", aria_hidden: true, title: t("views.actions.copy.button")) %>
           </button>
           <div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden><%= t("views.actions.copy.text") %></div>
         </div>

app/views/articles/_reaction_button.html.erb

@@ -6,11 +6,11 @@
   data-category="<%= category %>"
   title="<%= description %>">
   <span class="crayons-reaction__icon crayons-reaction__icon--inactive">
-    <%= inline_svg_tag(image_path, aria_hidden: true, class: "crayons-icon") %>
+    <%= crayons_icon_tag(image_path, aria_hidden: true) %>
   </span>
   <% if user_signed_in? # We cannot trigger the action state unless the user is signed in, so no need to render. %>
   <span class="crayons-reaction__icon crayons-reaction__icon--active">
-    <%= inline_svg_tag(image_active_path, aria_hidden: true, class: "crayons-icon") %>
+    <%= crayons_icon_tag(image_active_path, aria_hidden: true) %>
   </span>
   <% end %>
   <span class="crayons-reaction__count" id="reaction-number-<%= category %>"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

app/views/articles/_sidebar.html.erb

@@ -10,7 +10,7 @@
         <div class="<%= "hidden" if user_signed_in? %> px-1" id="sponsorship-widget">
           <h4 class="flex align-center fs-s ff-monospace fw-bold tt-uppercase mb-4">
             <%= Settings::General.sponsor_headline %>
-            <%= inline_svg_tag("twemoji/heart.svg", aria: true, class: "crayons-icon crayons-icon--default ml-1", title: t("views.sponsor.seek")) %>
+            <%= crayons_icon_tag("twemoji/heart", class: "ml-1", native: true, title: t("views.sponsor.seek")) %>
           </h4>
           <div class="grid grid-cols-1 gap-6">
             <%= render partial: "articles/single_sponsor", collection: @sponsorships, as: :sponsorship %>

app/views/articles/_single_story.html.erb

@@ -121,7 +121,7 @@
         <div class="crayons-story__details">
           <% if story.public_reactions_count > 0 %>
             <a href="<%= story.path %>" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="<%= story.id %>" aria-label="<%= t("views.articles.comments.aria_label", title: story.title, num: story.public_reactions_count) %>">
-              <%= inline_svg_tag("small-heart.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: t("views.reactions.summary.title")) %>
+              <%= crayons_icon_tag("small-heart", title: t("views.reactions.summary.title")) %>
               <%= t("views.reactions.summary.count_html",
                     count: story.public_reactions_count,
                     start: tag("span", { class: %w[hidden s:inline] }, true),
@@ -130,7 +130,7 @@
           <% end %>
           <% if story.comments_count > 0 %>
             <a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" aria-label="<%= t("views.articles.comments.aria_label", title: story.title, num: story.public_reactions_count) %>">
-              <%= inline_svg_tag("small-comment.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: t("views.comments.summary.title")) %>
+              <%= crayons_icon_tag("small-comment", title: t("views.comments.summary.title")) %>
               <%= t("views.comments.summary.count_html",
                     count: story.comments_count,
                     start: tag("span", { class: %w[hidden s:inline] }, true),
@@ -138,7 +138,7 @@
             </a>
           <% else %>
             <a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" aria-label="<%= t("views.articles.comments.aria_label", title: story.title, num: story.public_reactions_count) %>">
-              <%= inline_svg_tag("small-comment.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: t("views.comments.summary.title")) %>
+              <%= crayons_icon_tag("small-comment", title: t("views.comments.summary.title")) %>
               <span class="hidden s:inline"><%= t("views.comments.add") %></span>
             </a>
           <% end %>

app/views/articles/_sticky_nav.html.erb

@@ -30,7 +30,7 @@
         <header class="crayons-card__header">
           <h3 class="crayons-subtitle-2">
             <%= t("views.sticky.trending_html", app: link_to(community_name, app_url)) %>
-            <%= inline_svg_tag("twemoji/fire.svg", aria: true, class: "crayons-icon crayons-icon--default", title: t("views.sticky.hot")) %>
+            <%= crayons_icon_tag("twemoji/fire", native: true, title: t("views.sticky.hot")) %>
           </h3>
         </header>
         <div>

app/views/articles/_v2_form.html.erb

@@ -70,7 +70,7 @@
 
       <div class="crayons-article-form__close">
         <a href="/" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon" title="<%= t("views.editor.close.title") %>">
-          <%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: t("views.editor.close.icon")) %>
+          <%= crayons_icon_tag(:x, title: t("views.editor.close.icon")) %>
         </a>
       </div>
     </div>