1 files changed, 29 insertions, 0 deletions

diff --git a/client/src/app/+signup/shared/signup-mascot.component.ts b/client/src/app/+signup/shared/signup-mascot.component.ts
new file mode 100644
index 000000000..a96ccffee
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-mascot.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
+
+const images = {
+  about: require('!!raw-loader?!../../../assets/images/mascot/register/about.svg').default,
+  terms: require('!!raw-loader?!../../../assets/images/mascot/register/terms.svg').default,
+  success: require('!!raw-loader?!../../../assets/images/mascot/register/success.svg').default,
+  channel: require('!!raw-loader?!../../../assets/images/mascot/register/channel.svg').default,
+  account: require('!!raw-loader?!../../../assets/images/mascot/register/account.svg').default
+}
+
+export type MascotImageName = keyof typeof images
+
+@Component({
+  selector: 'my-signup-mascot',
+  styleUrls: [ './signup-mascot.component.scss' ],
+  template: `<div class="root" [innerHTML]="html"></div>`
+})
+export class SignupMascotComponent {
+  @Input() imageName: MascotImageName
+
+  constructor (private sanitize: DomSanitizer) {
+
+  }
+
+  get html () {
+    return this.sanitize.bypassSecurityTrustHtml(images[this.imageName])
+  }
+}