How to display SVG files in Elm

Learn
1

What is the simplest way to include an SVG file on your website? I’m trying to include icons with
image [] { src = “assets/icons/feather.svg”, description = “” }
but this doesn’t work.
And many SVG libraries are out of date.
Anyone know how to fix this? Cheers!

2

Edit: Looks like I missed that you’re using elm-ui. Most of what I wrote is wrong and can be ignored, sorry :smiley:

Is that exactly the code you are using? If so, i think that could be your problem, because the following things are not quite correct:

  • You are using image instead of img
  • You are setting the attributes inside of { .. } and in the wrong place
  • You are missing the empty array [] for child nodes
  • You are using weird quotation marks “ ” instead of " "

I think what should work is something like

Html.img
     -- Note attributes
    [ Html.Attributes.src "assets/icons/feather.svg"
    , Html.Attributes.attribute "description" "This is my description"
    ]
    -- Child notes
    []

(I used the namespaces for easier understanding. If you imported those you can of course drop them and write e.g. img [ src .. ] [])

Also: Are you using “description” as an attribute on purpose? Usually one would use alt or title attributes, i think.

Next time i would suggest you show an actual part of your code and the compiler error if possible. That helps people understand what exactly your problem is. I hope i guessed correctly what is “wrong” for you right now though.

3

From the API I have the impression that you are using Elm UI (Element - elm-ui 1.1.8)

Including SVG as an image works fine, but if you want to use a SVG icon set your best bet is to switch to the specific package, ex. FeatherIcons - elm-feather 1.5.0

4

Your code is correct… And the simplest way to show an SVG.
It must be something with hosting of your svg-file or the link you use.
(check browser-console for 404 error)
Here is a working ellie of what your code does:
https://ellie-app.com/ghzmCw8qQN5a1

I usually use elm/svg for all my icons… and just create them purely in elm without any library.
They are usually just a single Svg.path anyway. so simple to copy paste from source.
example:

svg [ viewport "0 0 24 24" ] [ path [ d "xxxyyyzzz" ] [] ]

This way you can also add something like fill “currentColor” and the icon will be filled with the color specified as Font.color on the parent elm-ui element.
It is also super easy to customize the icon by just passing parameters.
And you have zero dependencies to worry about.

And by the way, in elm, even if a library has not had an update for two years it is probably not out-of-date, just stable :slight_smile:

5

Wow. Thanks. I was using feather icons anyway. Didn’t know elm had a library for specifically that.

6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.