Icons and Images
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.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)
Last modified 3mo ago