Add linked SVG image to button

app/assets/images/pictograms/alert-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>alert-outline</title><g fill="white"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>

app/assets/images/pictograms/check-circle-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>check-circle-outline</title><g fill="white"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>

app/assets/images/pictograms/login.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M10,17V14H3V10H10V7L15,12L10,17M10,2H19A2,2 0 0,1 21,4V20A2,2 0 0,1 19,22H10A2,2 0 0,1 8,20V18H10V20H19V4H10V6H8V4A2,2 0 0,1 10,2Z" /></svg>

app/assets/stylesheets/application.css

@@ -17,7 +17,7 @@
 * {
   font-family: system-ui;
 }
-
+// TODO: convert em to rem
 body {
   margin: 0 0.5em;
 }
@@ -48,12 +48,20 @@ input:focus:not([type=checkbox]) {
   border-color: #a0a0a0;
   border-radius: 0.2em;
   color: #a0a0a0;
+  display: flex;
+  fill: #a0a0a0;
   float: right;
   font-size: 0.8em;
   font-weight: bold;
   margin-left: 1em;
   padding: 0.6em;
 }
+.application-menu a svg {
+  height: 1rem;
+  padding-right: 0.4rem;
+  width: 1rem;
+}
+.application-menu a.active,
 .application-menu a:hover,
 .application-menu a:focus-visible,
 input[type=submit]:hover,
@@ -62,6 +70,7 @@ input[type=submit]:focus-visible {
   border-color: #009ade;
   color: white;
   cursor: pointer;
+  fill: white;
   text-decoration: none;
 }
 

app/helpers/application_helper.rb

@@ -25,4 +25,11 @@ module ApplicationHelper
     options.merge! builder: TabularFormBuilder
     form_for(record, **options, &block)
   end
+
+  def svg_tag(source, options = {})
+    image_name, id = source.split('#')
+    content_tag :svg, options do
+      tag.use href: "#{image_path(image_name)}##{id}"
+    end
+  end
 end

app/views/layouts/application.html.erb

@@ -14,7 +14,8 @@
     <div class="application-menu">
       <%= link_to_if user_signed_in?, t(:sign_out), destroy_user_session_path,
                        data: { turbo_method: :delete } do %>
-        <%= link_to t(:sign_in), new_user_session_path %>
+        <%= link_to svg_tag('pictograms/login.svg#icon')+t(:sign_in), new_user_session_path,
+                     class: class_names(active: current_page?(new_user_session_path))%>
       <% end %>
 
       <%= link_to_unless(user_signed_in?, t(:register), new_user_registration_path) { } %>

config/initializers/assets.rb

@@ -9,4 +9,4 @@ Rails.application.config.assets.version = "1.0"
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
-# Rails.application.config.assets.precompile += %w( admin.js admin.css )
+Rails.application.config.assets.precompile += %w( '*.svg' )