KVision
Primary version
Primary version
  • KVision Guide
  • Introduction
  • Migration
    • Migration from 8.x to 9.x
    • Migration from 7.x to 8.x
    • Migration from 6.x to 7.x
    • Migration from 5.x to 6.x
    • Migration from 4.x to 5.x
  • 1. Getting Started
    • Setting Up
    • Modules
    • Creating a New Application
    • Development Workflow
    • Hot Module Replacement
    • Debugging
    • Building For Production
  • 2. Frontend Development Guide
    • UI Structure
    • Root Container
    • Theming
    • Dark mode
    • Type safe CSS Properties
    • Basic Components
    • Icons and Images
    • Buttons and Toolbars
    • Layout Containers
    • Events
    • Working with State
    • DOM Bindings & Lifecycle Hooks
    • W3C, Snabdom, and KVision Elements
    • Forms
    • Form controls
    • Drag and drop
    • Internationalization
    • Adding custom tags (SVG example)
    • Custom components
  • 3. Optional UI Functionality (via modules)
    • Using Redux
    • Bootstrap
      • Navigation and menus
      • Tooltips and popovers
      • Modals, windows and toasts
    • Charts
    • Toasts
    • Tabulator Tables
    • Handlebars.js Templates
    • JS Routing with Navigo
    • jQuery Bindings
    • Using REST Services
  • 4. Integrating With Javascript Libraries
    • Integrating With React Components
  • 5. Fullstack Development Guide
    • Select Remote
    • Tom Select Remote
    • Tom Typeahead Remote
    • Tabulator Remote
  • FAQ
  • Useful References
Powered by GitBook
On this page
  • Icons
  • Images
  1. 2. Frontend Development Guide

Icons and Images

PreviousBasic ComponentsNextButtons and Toolbars

Last updated 27 days ago

Icons

KVision has built-in support for free font icons from the project (you have to include kvision-fontawesome module) and from the 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 .

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/modules/img directory and refer to them with a @JsModule annotation.

@JsModule("/kotlin/modules/img/dog.jpg")
external val dogJpg: dynamic

val i = Button("A button with an image") {
    image = dogJpg
}

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:

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(catJpg, alt = "A rounded and responsive cat",
    responsive = true, shape = ImageShape.ROUNDED)
val dogImg = Image(dogJpg, alt = "Centered dog in a circle",
    shape = ImageShape.CIRCLE, centered = true)
Font Awesome
Bootstrap Icons
Font Awesome gallery page