How to add an icon/image to routes using Aurelia?

Question

我想在Aurelia的路由器配置中指定的导航链接中添加图像/图标。

Answer 1

I found the answer on GitHub . You can add a Settings property in router configuration which allows you to specify a path to an image. In my case I am using an 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>