Inserting html and SVGs

Can you post that error?

Can you also maybe post the contents of _static-section.html.eex?

Yes, the error is:

no function clause matching in Phoenix.Endpoint.Supervisor.static_path/2

I’ve also fixed the code in my initial post which wasn’t rendering correctly, but here’s the _static-section.html.eex

<div class="card">
    <div class="card-image"> 
        <img src="<%= Routes.static_path(@conn, '/images/calendar.svg') %>" alt="Calendar">
    </div>
</div>

You have a charlist in your static path, try changing it to a binary.

<div class="card">
    <div class="card-image"> 
-       <img src="<%= Routes.static_path(@conn, '/images/calendar.svg') %>" alt="Calendar">
+       <img src="<%= Routes.static_path(@conn, "/images/calendar.svg") %>" alt="Calendar">
    </div>
</div>

<%= render "_static-section.html", conn: @conn %> in index.html.eex should probably work after that change.

Legend! Didn’t know that the quotes would have an effect on the rendering. Thanks.

BTW, if I wanted to say, include the actual SVG code instead of using an <img> tag, what would be the correct way to go about it? Sort of like in PHP where <?php include "/images/sample.svg"; ?>?

BTW, if I wanted to say, include the actual SVG code instead of using an <img> tag, what would be the correct way to go about it? Sort of like in PHP where <?php include "/images/sample.svg"; ?> ?

I don’t know if there is any idiomatic approach to working with SVG in phoenix, but if I knew that the image is very unlikely to change I’d do the following:

I’d make a function in my view with the SVG like

defmodule MyApp.SomeView do
  use Web, :view

  sample_svg = File.read!("priv/static/images/sample.svg")

  @spec sample_svg :: binary
  def sample_svg do
    unquote(sample_svg)
  end
end

This would read the svg at compile time and “persist” it in a function. This way the function just outputs the svg contents (as they were at compile time) any time it is called.

In my EEx templates I’d be able to do the following then:

...
<%= MyApp.SomeView.sample_svg() %>
...

Another (probably easier) approach would be to turn the svg into an EEx template.

I’d create a new _sample.svg.eex (or sample_svg.html.eex if the previous one doesn’t work) with the contents of priv/static/images/sample.svg (that one could be deleted then, since it’s been replaced by the eex template) and call <%= render "_sample.svg" %> from within my other EEx templates.

Ah yes, I’m going with placing the SVG in an html.eex file. Thanks mate.

FYI: Phoenix Inline SVG

Hey all!

I came across this thread and went down the same path as Budji, but after using the phoenix_inline_svg library and running into issues with its dependencies conflicting with LiveView.

What I ended doing was adding <%= assigns[:svg_class] %> to the svg’s css class and then was able to assign css classes to the svg dynamically inside Phoenix templates.

Works great but it was going to be a pain converting each svg into a eex.html template and adding the <%= assigns[:svg_class] %> to the svg.

So I created a very simple tool do it.

Anyone coming across this thread needing to use svgs icons in their project should check it out!

https://github.com/bigbassroller/modify-svgs

Why write new files though? I use the following to parse fontawesome icons into a module, which holds all the icon directly:

  # SvgHelper.render("fa-users.svg", class: "some_class")
  for file_path <- Path.wildcard("priv/fontawesome/svg/*.svg") do
    # name + content of the file
    basename = Path.basename(file_path)
    svg = File.read!(file_path)

    # Extract the attributes, which we cannot determine
    %{"attr" => width} = Regex.named_captures(~r/width=\"(?<attr>.*?)\"/, svg)
    %{"attr" => height} = Regex.named_captures(~r/height=\"(?<attr>.*?)\"/, svg)
    %{"attr" => viewbox} = Regex.named_captures(~r/viewBox=\"(?<attr>.*?)\"/, svg)
    %{"attr" => path} = Regex.named_captures(~r/<path d=\"(?<attr>.*?)\"/, svg)

    # Build the function for the current svg file filling in the blanks
    def render(unquote("fa-" <> basename), opts) do
      path = unquote(path)
      svg_opts = [width: unquote(width), height: unquote(height), viewBox: unquote(viewbox)]

      content_tag :svg, opts ++ base_opts() ++ svg_opts do
        tag(:path, d: path)
      end
    end
  end

  defp base_opts, do: [xmlns: "http://www.w3.org/2000/svg"]

Thats an interesting way of doing it as well. I was running into performance issues with the inline_svg library when loading all bootstrap icons. I wanted to avoid that. I felt having them all be eex templates would prevent any issues in the future. Thats how arrived at my solution.