Hi, I am doing a multiplatform-full-stack-app tuto...

# react

[Haruki]

Hi, I am doing a multiplatform-full-stack-app tutorial (https://kotlinlang.org/docs/multiplatform-full-stack-app.html#build-the-user-interface). And I would like to add fancy icons. I usually use Font Awesome for icons on static HTML, and I am wondering if it's possible to add Font-Awesome icons to the code below. I am assuming we can implement it by adding the class attribute to an i tag, like this: i("fa-light fa-trash-can"){} as we implement it on static HTML by <i class="fa-light fa-trash-can"></i>. However, this doesn't work since it seems like the way I added the class attribute doesn't work. I would like to know how you usually add fancy icons and class attributes on kotlin react.

import react.*
import kotlinx.coroutines.*
import react.dom.html.ReactHTML.h1
import <http://react.dom.html.ReactHTML.li|react.dom.html.ReactHTML.li>
import react.dom.html.ReactHTML.ul



val App = FC<Props> {

    h1 {
        +"Full-Stack Shopping List"
    }
}

[turansky]

h1 {
    +"Full-Stack Shopping List"

    i {
        className = ClassName("fa-light fa-trash-can")
    }
}

[Haruki]

Thank you so much! It works. I would like to know how I could have figured this out. I searched a lot online, but I could not find the solution.

[turansky]

Strict example with constants

object FA {
    inline val light: ClassName
        get() = ClassName("fa-light")
    inline val trashCan: ClassName
        get() = ClassName("fa-trash-can")
}

h1 {
    +"Full-Stack Shopping List"

    i {
        className = cx(FA.light, FA.trashCan)
    }
}