Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

SVG Support in Vaadin

Sheila Hobeck
5 years ago Dec 10, 2016 3:47am
Marco Collovati
5 years ago Dec 10, 2016 9:19am

Hi Sheila,
it works fine for me with Image and css. 

@Theme("mytheme")
public class MyUI extends UI {

    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();

        Label label = new Label();
        label.setWidthUndefined();
        label.setStyleName("mytest");

        Image image = new Image(null, new ThemeResource("imgs/laptop.svg"));

        Button button = new Button(null, new ThemeResource("imgs/laptop.svg"));
        button.setStyleName("mytest");
        
        layout.addComponents(label, image, button);
        layout.setMargin(true);
        layout.setSpacing(true);

        setContent(layout);

    }
}

And the theme

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  .v-label-mytest {
    background-image: url(imgs/laptop.svg);
    width: 100px;
    height: 100px;
    background-size: contain;
  }
  .v-button-mytest .v-icon {
    background-image: url(imgs/laptop.svg);
    width: 20px;
    height: 20px;
  }

}

HTH
Marco
 

Sheila Hobeck
5 years ago Dec 10, 2016 8:02pm