Как добавить значок/изображение в маршруты с помощью Aurelia?

Question

Я хотел добавить изображение/значок к моим ссылкам навигации, которые были указаны в конфигурации маршрутизатора Aurelia.

Answer 1

Я нашел ответ на GitHub. Вы можете добавить свойство Settings в конфигурацию маршрутизатора, что позволяет указать путь к изображению. В моем случае я использую 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>