basic SVG demo

angular-cli.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "mobile": false,
       "styles": [
-        "styles.sass"
+        "styles.scss"
       ],
       "scripts": [],
       "environments": {
@@ -41,7 +41,7 @@
     }
   },
   "defaults": {
-    "styleExt": "sass",
+    "styleExt": "scss",
     "prefixInterfaces": false,
     "inline": {
       "style": false,

src/app/app.component.html

@@ -1,3 +1,8 @@
-<h1>
-  {{title}}
-</h1>
+<h1>SVG</h1>
+
+<h2>Basic SVG support</h2>
+
+<p>You can just put an <code>&lt;svg&gt;</code> tag in a component and go to town. You can also style the SVG stuff using component styles.</p>
+
+<app-basic-logo>
+</app-basic-logo>

src/app/app.component.ts

@@ -3,8 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.sass']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app works!';
 }

src/app/app.module.ts

@@ -2,10 +2,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { BasicLogoComponent } from './basic-logo/basic-logo.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    BasicLogoComponent
   ],
   imports: [
     BrowserModule

src/app/basic-logo/basic-logo.component.html

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 250 250">
+  <g>
+    <polygon class="left" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
+    <polygon class="right" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
+    <path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
+      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
+  </g>
+</svg>

src/app/basic-logo/basic-logo.component.scss

@@ -0,0 +1,12 @@
+svg {
+  max-width: 300px;
+}
+.left {
+  fill:#DD0031;
+}
+.right {
+  fill:#C3002F;
+}
+.a {
+  fill:#FFFFFF;
+}

src/app/basic-logo/basic-logo.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-logo',
+  templateUrl: './basic-logo.component.html',
+  styleUrls: ['./basic-logo.component.scss']
+})
+export class BasicLogoComponent {
+}