svg icons implemented with initial POC

assets/css/app.scss

@@ -1,6 +1,34 @@
 /* Bootstrap v5 */
 @import "~bootstrap/scss/bootstrap";
 
+/* SVG icon style helper */
+// [class*=" icon"],
+// [class^="icon"] {
+//   width: 1em;
+//   height: 1em;
+//   stroke: currentColor;
+//   fill: currentColor;
+// }
+
+/*SVG ICON SYSTEM*/
+.icon {
+  display: inline-flex;
+  align-self: center;
+}
+
+.icon svg,
+.icon img {
+  height: 1em;
+  width: 1em;
+  fill: currentColor;
+}
+
+.icon.baseline svg,
+.icon img {
+  top: 0.125em;
+  position: relative;
+}
+
 /* LiveView specific classes for your customizations */
 .phx-no-feedback.invalid-feedback,
 .phx-no-feedback .invalid-feedback {

lib/bones73k/util/list.ex

@@ -0,0 +1,4 @@
+defmodule Bones73k.Util.List do
+  def prepend_if(list, condition, item), do: (!!condition && [item | list]) || list
+  def append_if(list, condition, item), do: (!!condition && list ++ [item]) || list
+end

lib/bones73k_web.ex

@@ -102,6 +102,9 @@ defmodule Bones73kWeb do
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
+      # Import SVG Icon helper
+      import Bones73kWeb.IconHelper
+
       import Bones73kWeb.ErrorHelpers
       import Bones73kWeb.Gettext
       alias Bones73kWeb.Router.Helpers, as: Routes

lib/bones73k_web/templates/layout/_navbar.html.eex

@@ -1,7 +1,10 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
 
-    <a class="navbar-brand" href="#">Navbar</a>
+    <a class="navbar-brand" href="#">
+      <%= icon_div @conn, "fas-skull-crossbones", class: "icon baseline" %>
+      Bones73k
+    </a>
 
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>

lib/bones73k_web/views/icon_helper.ex

@@ -0,0 +1,35 @@
+defmodule Bones73kWeb.IconHelper do
+  @moduledoc """
+  Generate SVG sprite use tags for SVG icons
+  """
+
+  use Phoenix.HTML
+  import Bones73k.Util.List
+  alias Bones73kWeb.Router.Helpers, as: Routes
+
+  def icon_div(conn, name, div_opts \\ [], svg_opts \\ []) do
+    content_tag(:div, tag_opts(name, div_opts)) do
+      icon_svg(conn, name, svg_opts)
+    end
+  end
+
+  def icon_svg(conn, name, opts \\ []) do
+    content_tag(:svg, tag_opts(name, opts)) do
+      tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg#" <> name))
+    end
+  end
+
+  defp tag_opts(name, opts) do
+    classes = "#{Keyword.get(opts, :class, "")} #{name}" |> String.trim_leading()
+    styles = Keyword.get(opts, :style)
+    width = Keyword.get(opts, :width)
+    height = Keyword.get(opts, :height)
+    id = Keyword.get(opts, :id)
+
+    [class: classes]
+    |> prepend_if(styles, {:style, styles})
+    |> prepend_if(width, {:style, width})
+    |> prepend_if(height, {:style, height})
+    |> prepend_if(id, {:id, id})
+  end
+end