Icons and Images

Icons

KVision has built-in support for free font icons from the Font Awesome project (you have to include kvision-fontawesome module) and from the Bootstrap Icons project (with kvision-bootstrap-icons module). Components like buttons, links, drop-downs, select options and tabs have an icon property, which can be set to one of many available icon names. KVision supports all free Font Awesome style prefixes - Solid (fas), Regular (far) and Brands (fab). You can check icon availability at Font Awesome gallery page.

val g = Button("A button with an icon", "fas fa-asterisk")
val fb = Link("A link with an icon", "https://google.com", "fab fa-google")

The dedicated io.kvision.html.Icon component lets you use those icons inside any container.

Images

Components like buttons, links, tabs and the css background class have an image property, which can be used to display custom images. To use your own graphical resources, put them inside the src/jsMain/resources/img directory and refer to them with a require function:

val i = Button("A button with an image") {
    image = require("img/dog.jpg")
}

Note: All local files referenced in your application will be processed by Webpack and saved under a mangled name in the output directory.

To use an external image just use its URL address without require.

val l = Link("A link with an external image", image = "https://www.host.com/logo.png")

The dedicated io.kvision.html.Image component lets you use images inside any container. It gives you also some additional control over image align, shape and responsiveness:

val catImg = Image(require("img/cat.jpg"), alt = "A rounded and responsive cat",
    responsive = true, shape = ImageShape.ROUNDED)
val dogImg = Image(require("img/dog.jpg"), alt = "Centered dog in a circle",
    shape = ImageShape.CIRCLE, centered = true)