Using line-awesome in Hilla Lit

ladam · January 21, 2025, 5:23pm

How to add line-awesome to Hilla 2.5 or Vaadin 24.5? I am using only client-sided view, except one server-sided view.
I want to get icon in in the side nav: (one of the icons)

<vaadin-side-nav-item path="/prompt" @click=${() => this.onNavItemCick()}>
    <vaadin-icon icon="lumo:plus" slot="suffix"></vaadin-icon>
    <vaadin-icon src="/line-awesome/svg/500px.svg" slot="suffix"></vaadin-icon>
    <i class="las la-plus" slot="suffix"></i>
    Ask a new question
</vaadin-side-nav-item>

I tried using the Addon.
Then I tried it with npm package and theme.json:

{
  "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ],
  "assets": {
    "line-awesome": {
      "svg": "line-awesome/svg"
    }
  }
}

or

  "documentCss": ["line-awesome/dist/font-awesome-line-awesome/css/all.min.css"]

and the css import in this post.
My routes.ts looks like this:

// [...]
export const routes: ViewRoute[] = [
  // Place routes below (more info https://hilla.dev/docs/routing)
  {
    path: 'login',
    component: 'login-view',
    name: 'login',
    title: 'Login'
  },
  {
    path: "",
    component: "main-view",
    name: 'main',
    icon: "",
    action: authAction,
    children: [
      {
        path: 'chat/:chatident',
        component: 'chat-view',
        name: 'chat',
        title: '{title}'
      },
      /* other client views */,
      ... serverSideRoutes,
    ] as any
  }
];

ladam · January 21, 2025, 5:24pm

When calling the url /line-awesome/svg/500px.svg to the icon it says either client sided or server sided “route not found”

Tatu2 · January 23, 2025, 11:11am

One way could be to install it with “npm i line-awesome” and then import in theme

github.com

TatuLund/hilla-v2-demo/blob/v24/frontend/themes/hilla-todo/styles.css#L3


      
          @import "theme-editor.css";
          @import "main-layout.css";
          @import url("line-awesome/dist/line-awesome/css/line-awesome.min.css");
          
          html {
            --lumo-border-radius: 0.5em;
            --lumo-primary-text-color: rgb(71, 122, 189);
            --lumo-primary-color-50pct: rgba(71, 122, 189, 0.5);
            --lumo-primary-color-10pct: rgba(71, 122, 189, 0.1);
            --lumo-primary-color: hsl(214, 47%, 51%);
            --lumo-error-text-color: rgb(195, 81, 75);
            --lumo-error-color-50pct: rgba(195, 81, 75, 0.5);
            --lumo-error-color-10pct: rgba(195, 81, 75, 0.1);

Then you use just the class names in your views, provided that they have shadow DOM disabled.

github.com

TatuLund/hilla-demo/blob/hilla2/frontend/views/list/list-view.ts#L22


      
          import { uiStore } from "Frontend/stores/app-store";
          import { ContactForm } from "./contact-form";
          import { Grid, GridColumn, GridDataProviderCallback, GridDataProviderParams, GridItemModel } from "@vaadin/grid";
          import { columnBodyRenderer } from "@vaadin/grid/lit.js"
          import Contact from "Frontend/generated/com/example/application/data/entity/Contact";
          import { RouterLocation } from "@vaadin/router";
          import { lang } from "Frontend/util/localization";
          import { contactRenderer, statusRenderer } from "./renderers";
          
          @customElement('list-view')
          export class ListView extends View {
          
            // Use query decorator to set grid for later use
            @query("#grid")
            grid! : Grid<Contact>;
          
            private narrow = false;
          
            // Process the url parameters
            onBeforeEnter(location: RouterLocation) { 
              if (location.params.company) {

Typically that means that your view is extending View from the view.ts file that was part of our starters.

So this then should work

<div class="la la-chart-line"></div>

ladam · January 27, 2025, 9:07am

In the end it was this simple. Thanks Tatu