Add simple icons (#564)

lib/pinchflat_web/components/core_components.ex

@@ -700,7 +700,7 @@ defmodule PinchflatWeb.CoreComponents do
   attr :class, :string, default: nil
   attr :rest, :global
 
-  def icon(%{name: "hero-" <> _} = assigns) do
+  def icon(assigns) do
     ~H"""
     <span class={[@name, @class]} {@rest} />
     """

lib/pinchflat_web/components/layouts.ex

@@ -15,11 +15,12 @@ defmodule PinchflatWeb.Layouts do
   attr :text, :string, required: true
   attr :href, :any, required: true
   attr :target, :any, default: "_self"
+  attr :icon_class, :string, default: ""
 
   def sidebar_item(assigns) do
     ~H"""
     <li class="text-bodydark1">
-      <.sidebar_link icon={@icon} text={@text} href={@href} target={@target} />
+      <.sidebar_link icon={@icon} text={@text} href={@href} target={@target} icon_class={@icon_class} />
     </li>
     """
   end
@@ -89,6 +90,7 @@ defmodule PinchflatWeb.Layouts do
   attr :href, :any, required: true
   attr :target, :any, default: "_self"
   attr :class, :string, default: ""
+  attr :icon_class, :string, default: ""
 
   def sidebar_link(assigns) do
     ~H"""
@@ -103,7 +105,7 @@ defmodule PinchflatWeb.Layouts do
         @class
       ]}
     >
-      <.icon :if={@icon} name={@icon} /> {@text}
+      <.icon :if={@icon} name={@icon} class={@icon_class} /> {@text}
     </.link>
     """
   end

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -47,8 +47,9 @@
           text="Docs"
           target="_blank"
           href="https://github.com/kieraneglin/pinchflat/wiki"
+          icon_class="scale-110"
         />
-        <.sidebar_item icon="hero-cog" text="Github" target="_blank" href="https://github.com/kieraneglin/pinchflat" />
+        <.sidebar_item icon="si-github" text="Github" target="_blank" href="https://github.com/kieraneglin/pinchflat" />
         <li>
           <span
             class={[
@@ -59,7 +60,7 @@
             ]}
             phx-click={show_modal("donate-modal")}
           >
-            <.icon name="hero-currency-dollar" /> Donate
+            <.icon name="hero-currency-dollar" class="scale-110" /> Donate
           </span>
         </li>
         <li>