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.
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.
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!
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:
