Inserting html and SVGs

Greetings, complete newbie with phoenix/elixir and I’m getting a “assign @conn not available in eex template” error with the following code:

In templates/page

file: index.html.eex

<section class="content">
  <%= render "_static-section.html" %>
</section>

file: _static-section.html.eex

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

The page works when removing the <%= render %> part from index.html.eex, so I’m doing something wrong in the _static-section.html.eex file, I just have no idea what I’m doing.

I’ve also tried: <%= render “_static-section.html”, conn: @conn %> but this one produces a different error altogether.

Here are the controller and view files:

page_controller.ex

defmodule Example.PageController do
    use Example, :controller

    def index(conn, _params) di
        render(conn, "index.html")
    end
end

page_view.ex

defmodule Example.PageView do
    use Example, :view
end

TIA

EDIT: Sorry the code didn’t render correctly the first time, fixed.

:wave:

Can you post that error?

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

1 Like

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.

4 Likes

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.

2 Likes

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

FYI: Phoenix Inline SVG

2 Likes

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!

1 Like

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"]
1 Like

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.

FYI, if you’re using LiveView you shouldn’t access assigns like that because it will break change tracking.

Generally speaking, avoid accessing variables inside LiveViews. This also applies to the assigns variable, except when rendering another .leex template. In such cases, it is ok to pass the whole assigns, as LiveView will continue to perform change tracking in the called template:

From: https://hexdocs.pm/phoenix_live_view/assigns-eex.html#liveeex-pitfalls

1 Like