How to add icon / image to routes using Aurelia?

Question

I wanted to add an image / icon to my navigation links that were specified in the configuration of the Aurelia router.

Answer 1

I found an answer on github . You can add a property Settingsto the router configuration, which allows you to specify the path to the image. In my case, I am using SVG:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        {route: ['', 'dogs'], moduleId: './dogs', nav: true, title: 'Dogs', settings: './img/dogs-nav.svg'},
        {route: ['cats', 'cats'], moduleId: './cats', nav: true, title: 'Cats', settings: './img/cats-nav.svg'},
    });
  }
}

<ul class="nav navbar-nav">
  <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
    <a href.bind="row.href">
      <img src="${row.settings}">
      <span>${row.title}</span>
    </a>
  </li>
</ul>

Run codeHide result