Docs

Docs

Loading Styles, Fonts & Images from npm Packages

Describes how to use resources like fonts, icons, and stylesheets from npm packages.

Before you can import stylesheets and other styling-related resources like fonts and icons from npm packages, you need to add the package dependency with the @NpmPackage annotation. Define both the package name and version number:

Source code
Adding an npm package dependency
@NpmPackage(value = "@fortawesome/fontawesome-free", version = "7.1.0")
public class AppShell implements AppShellConfigurator {
}

Once you have added an npm package dependency, you can import resources from that package.

Importing Stylesheets from npm Packages

Use the @CssImport annotation to import stylesheets from an npm package. For example, to load all.min.css from @fortawesome/fontawesome-free:

Source code
Importing a stylesheet from an npm package
@NpmPackage(value = "@fortawesome/fontawesome-free", version = "7.1.0")
@CssImport("@fortawesome/fontawesome-free/css/all.min.css")
public class AppShell implements AppShellConfigurator {
}

@Tag("my-component")
public class MyComponent implements Component {
    public MyComponent() {
        Span userIcon = new Span();
        userIcon.addClassNames("fa-sharp", "fa-solid", "fa-user");
        userIcon.getStyle().set("font-family", "'Font Awesome 7 Free'");
        add(userIcon);
    }
}

Using Static Resources from npm Packages

The assets field in the @NpmPackage annotation allows you to copy assets from npm packages into the static resource folder (i.e., the VAADIN/static folder), allowing you to references them from Java source code and from the browser.

The assets field syntax looks like this in general: "asset/glob/pattern:local/target/path". The first part defines which files from the npm package should be copied, and it can be a “glob” pattern. The second part, after the colon, defines where matching resources are copied under the resources folder. You can define multiple asset mappings for a single package annotation.

Source code
Using icons from an npm package
@NpmPackage(value = "@fortawesome/fontawesome-free", version = "7.1.0",
    assets = {
        "svgs/regular/**:fontawesome/icons"
    })

@Tag("my-component")
public class MyComponent implements Component {
    public MyComponent() {
        add(new Image("VAADIN/static/fontawesome/icons/snowflake.svg",
            "snowflake"));
    }
}

In the previous example, the fortawesome file svgs/regular/snowflake.svg is copied to VAADIN/static/fontawesome/icons/snowflake.svg and can be accessed with that path in the application code and CSS stylesheets.

3e46fe3b-00d6-4cf7-908c-342a364210db