svg icons implemented with initial POC

This commit is contained in:
Adam Piontek 2021-02-25 16:39:03 -05:00
parent 97659bf32c
commit 129354dec1
5 changed files with 74 additions and 1 deletions

View file

@ -1,6 +1,34 @@
/* Bootstrap v5 */ /* Bootstrap v5 */
@import "~bootstrap/scss/bootstrap"; @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 */ /* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback, .phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback { .phx-no-feedback .invalid-feedback {

View file

@ -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

View file

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

View file

@ -1,7 +1,10 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container"> <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"> <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> <span class="navbar-toggler-icon"></span>

View file

@ -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