SVG icons

terminus-core/src/api/toolbarButtonProvider.ts

@@ -1,5 +1,7 @@
+import { SafeHtml } from '@angular/platform-browser'
+
 export interface IToolbarButton {
-    icon: string
+    icon: SafeHtml
     title: string
     touchBarTitle?: string
     weight?: number

terminus-core/src/components/appRoot.component.pug

@@ -36,8 +36,8 @@ title-bar(
                 *ngFor='let button of leftToolbarButtons',
                 [title]='button.title',
                 (click)='button.click()',
+                [innerHTML]='button.icon',
             )
-                i.fa([class]='"fa fa-" + button.icon')
 
         .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
 
@@ -46,15 +46,15 @@ title-bar(
                 *ngFor='let button of rightToolbarButtons',
                 [title]='button.title',
                 (click)='button.click()',
+                [innerHTML]='button.icon',
             )
-                i.fa([class]='"fa fa-" + button.icon')
-            button.btn.btn-secondary.btn-tab-bar(
+
+            button.btn.btn-secondary.btn-tab-bar.btn-update(
                 *ngIf='appUpdate',
                 title='Update available',
                 (click)='updateApp()',
+                [innerHTML]='updateIcon'
             )
-                i.fa.fa-arrow-up.text-info
-                span.text-info Update
 
         window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',

terminus-core/src/components/appRoot.component.scss

@@ -35,6 +35,7 @@ $tab-border-radius: 4px;
         line-height: $tabs-height + 2px;
         cursor: pointer;
 
+        display: flex;
         padding: 0 15px;
         flex: 0 0 auto;
         border-bottom: 2px solid transparent;
@@ -46,7 +47,6 @@ $tab-border-radius: 4px;
         color: #aaa;
         border: none;
         border-radius: 0;
-
     }
 
     &>.tabs {
@@ -87,3 +87,13 @@ hotkey-hint {
     right: 0;
     max-width: 300px;
 }
+
+::ng-deep .btn-tab-bar svg {
+    height: 16px;
+    fill: white;
+    fill-opacity: 0.75;
+}
+
+::ng-deep .btn-update svg {
+    fill: cyan;
+}

terminus-core/src/components/appRoot.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject, Input, HostListener, HostBinding } from '@angular/core'
 import { trigger, style, animate, transition, state } from '@angular/animations'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 
 import { ElectronService } from '../services/electron.service'
@@ -58,6 +59,7 @@ export class AppRootComponent {
     @HostBinding('class') hostClass = `platform-${process.platform}`
     tabsDragging = false
     unsortedTabs: BaseTabComponent[] = []
+    updateIcon: SafeHtml
     private logger: Logger
     private appUpdate: Update
 
@@ -74,6 +76,7 @@ export class AppRootComponent {
         @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],
         log: LogService,
         ngbModal: NgbModal,
+        domSanitizer: DomSanitizer,
         _themes: ThemesService,
     ) {
         this.logger = log.create('main')
@@ -82,6 +85,8 @@ export class AppRootComponent {
         this.leftToolbarButtons = this.getToolbarButtons(false)
         this.rightToolbarButtons = this.getToolbarButtons(true)
 
+        this.updateIcon = domSanitizer.bypassSecurityTrustHtml(require('../icons/gift.svg')),
+
         this.hotkeys.matchedHotkey.subscribe((hotkey) => {
             if (hotkey.startsWith('tab-')) {
                 let index = parseInt(hotkey.split('-')[1])

terminus-core/src/icons/gift.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 448c0 17.7 14.3 32 32 32h160V320H32v128zm448-288h-42.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H32c-17.7 0-32 14.3-32 32v80c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-80c0-17.7-14.3-32-32-32zm-326.1 0c-22.1 0-40-17.9-40-40s17.9-40 40-40c19.9 0 34.6 3.3 86.1 80h-86.1zm206.1 0h-86.1c51.4-76.5 65.7-80 86.1-80 22.1 0 40 17.9 40 40s-17.9 40-40 40zm-72 320h160c17.7 0 32-14.3 32-32V320H288v160z"/></svg>