如何在Ionic 2中添加自定义SVG图标

Question

如何在Ionic 2中添加自定义图标？我有一个SVG文件，需要将该图标添加到菜单中。

this.pages = [
      {icon: 'Test', title: 'Logout', component: LoginPage }
    ];

    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon name="{{p.icon}}" svgversion item-left></ion-icon>
        {{p.title}}
      </button>
    </ion-list>

layout.scss

ion-ion[name="test"][svgversion] {
  content: url("../../img/accountsDeposits.svg");
}

- sridharan

---

你只需在 theme/app.core.scss 文件中使用 @font-face 添加它，然后就可以在任何需要的地方使用了。 - Hiren Gohel

Answer 1

你可以使用fontastic从你的svg图标创建svg图标字体，它可以在线使用或导出到你自己的svg字体中，它会给你使用说明，而且是免费的。

点击链接

- Rohit Vinay

Answer 2

您只需添加 /src/theme/global.scss 或 /page/your-page/your-page.scss：

.logo {

    background: url(../assets/images/logo-vc.svg) no-repeat top left;
    background-size: contain;
    width: 80px;
    height: 35px;
    margin: 20px auto 0 auto;

}

- Cândido Sales Gomes