SVG icons

[janilcgarcia]

Has anyone tried using pre-made SVG icons directly in laminar? Like bootstrap icons or font-awesome? What are you doing?

I ended up doing something like this first:

svg.svg(
  svg.xmlns := "http://www.w3.org/2000/svg",
  svg.width := "16",
  svg.height := "16",
  svg.fill := "currentColor",
  svg.cls := "bi bi-arrow-up",
  svg.viewBox := "0 0 16 16",

  svg.path(
    svg.fillRule := "evenodd",
    svg.d := "M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"
  )
)

But now moving back to using CSS classes + icon font, because transforming SVG code into Scala DOM Types code for every icon I want to use is particularly not intuitive.

Quite honestly I would love to have something like this:
https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react#using

But I don't know how that works in React and I have no idea how to implement that in Laminar. Honestly, It would be enough to have a way I could just paste the SVG string in my code and transform it an icon, so I could just store the icons in an object like this:

object Icons {
  val arrowUp: ReactiveElement[dom.svg.SVG] = stringToReactiveElement("""
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-short" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
</svg>
  """
}

How could I implement stringToReactiveElement up there? It doesn't even need to be a ReactiveElement, it'd be happy with anything I could just pass as modifier to other elements.

[yurique]

@janilcgarcia Hi!

I'm doing something like this normally for svg:
https://github.com/tulz-app/laminext/blob/main/website/src/main/scala/io/laminext/site/icons/Icons.scala

And using this to get the scala code out of svg(html):
https://simerplaha.github.io/html-to-scala-converter/

(just noticed that Laminar is now explicitly supported :); before that, scalatags option worked fine as well, except some minor issues with more complicated cases)

[janilcgarcia]

That's pretty good. For the amount of icons I need to use that converter is more than enough.

Strangely I didn't even consider a converter like that as a possible solution, it's an amazing idea. I may take this route now.
Thanks for the suggestion.

Oh, and BTW, thanks for the your (and others) work on the laminext library, it is brilliant! I'm using the fetch event streams for my project and it saved me a lot of time.

[raquo]

People have been asking for this a few times already, I think I'll implement some kind of helper to do this in one step.

If you don't want to use html-to-scala-converter, the process is two steps:

1. Create svg dom element from svg string using native Javascript methods (you'll need to google how to do that in Javascript)
2. Take the resulting svg element and append it to a Laminar element, or wrap it in a ChildNode and use the result as a Laminar element, like this:

val el = div(...)
el.ref.appendChild(yourJsSvgElement)

Or

val mySvgElement = new ChildNode[HTMLElement] {
  val ref: dom.svg.Element = yourJsSvgElement
}
div(..., mySvgElement)

[janilcgarcia]

I was not sure how/if I could do something like that with laminar. I was afraid just insert children like that would mess up the proper working of the reactive elements. It is good that I can do that, it opens a few doors.

I think a helper to convert dom elements into child nodes would be really nice, but I also believe adding this info to the docs already solves most peoples problems.

Thanks for taking the time to answer, and thanks for the amazing work on Laminar. I'm coming from a Vue.js/React.js background and I'm having a lot of trouble adapting to stream model, and still the solutions I'm creating look so elegant, I think I'm starting to miss having laminar in my day job :P

[yurique]

I think I'm starting to miss having laminar in my day job :P

That's the only downside of Laminar =)

[raquo]

I was afraid just insert children like that would mess up the proper working of the reactive elements.

I concur, it doesn't look idiomatic, it's more of a workaround. But it should be safe.

I'm having a lot of trouble adapting to stream model

No worries, it's expected to have a period of adjustment to 1) observables, and to a lesser extent 2) not having a virtual dom. But soon you get the hang of it, and it's smooth sailing from there!