feat(svg): .svg as components, .svg imports

README.md

@@ -1,6 +1,6 @@
 <p align="center" style="margin-bottom: 100px;">
   <a href="http://legendbuilder.io">
-    <img height="120" src="https://cdn.rawgit.com/SteveVanOpstal/LegendBuilder/master/src/assets/images/logo.svg">
+    <img height="120" src="https://cdn.rawgit.com/SteveVanOpstal/LegendBuilder/master/src/client/assets/images/logo.svg">
   </a>
   <h3 align="center">Legend Builder</h3>
   <p align="center">An advanced <a href="http://www.leagueoflegends.com/">League of Legends</a> champion builder</p>

config/webpack/client/dev.js

@@ -53,14 +53,14 @@ module.exports = webpackMerge(commonConfig, {
 
     loaders: [
       {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/]},
-      {test: /\.css$/, loader: 'raw-loader'}
+      {test: /\.css|.svg$/, loader: 'raw-loader'}
     ]
   },
 
   plugins: [
     new ForkCheckerPlugin(), new OccurrenceOrderPlugin(true),
     new CommonsChunkPlugin({name: ['vendor', 'polyfills']}),
-    new CopyWebpackPlugin([{from: 'src/assets/images', to: 'assets/images'}]),
+    new CopyWebpackPlugin([{from: 'src/client/assets/images', to: 'images'}]),
     new CopyWebpackPlugin([{from: 'src/client/base.css', to: 'base.css'}]),
     new HtmlWebpackPlugin({template: 'src/client/index.html', chunksSortMode: 'dependency'}),
     new DefinePlugin({'ENV': JSON.stringify(ENV)})

config/webpack/client/prod.js

@@ -50,14 +50,14 @@ module.exports = webpackMerge(commonConfig, {
         query: {'compilerOptions': {'removeComments': true}},
         exclude: [/\.(spec|e2e)\.ts$/]
       },
-      {test: /\.css$/, loader: 'raw-loader'}
+      {test: /\.css|.svg$/, loader: 'raw-loader'}
     ]
   },
 
   plugins: [
     new ForkCheckerPlugin(), new OccurrenceOrderPlugin(true),
     new CommonsChunkPlugin({name: ['vendor', 'polyfills']}), new WebpackMd5Hash(),
-    new DedupePlugin(), new CopyWebpackPlugin([{from: 'src/assets/images', to: 'assets/images'}]),
+    new DedupePlugin(), new CopyWebpackPlugin([{from: 'src/client/assets/images', to: 'images'}]),
     new HtmlWebpackPlugin({template: 'src/client/index.html', chunksSortMode: 'dependency'}),
     new DefinePlugin({'ENV': JSON.stringify(ENV)}),
     new UglifyJsPlugin({beautify: false, mangle: {keep_fnames: true}, comments: false}),

config/webpack/client/test.js

@@ -35,7 +35,7 @@ module.exports = webpackMerge(commonConfig, {
 
     loaders: [
       {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.e2e\.ts$/]},
-      {test: /\.css$/, loader: 'raw-loader'}
+      {test: /\.css|.svg$/, loader: 'raw-loader'}
     ],
 
     postLoaders: [{

src/client/assets/icon-error.component.ts

@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({selector: 'icon-error', template: require('./images/error.svg')})
+
+export class IconErrorComponent {
+}

src/client/assets/icon-eye.component.ts

@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({selector: 'icon-eye', template: require('./images/eye.svg')})
+
+export class IconEyeComponent {
+}

src/client/assets/icon-load.component.ts

@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({selector: 'icon-load', template: require('./images/load.svg')})
+
+export class IconLoadComponent {
+}

src/client/assets/icon-rank.component.ts

@@ -0,0 +1,30 @@
+import {Component, Input} from '@angular/core';
+
+export class Colors {
+  public static blue: string = '#4C99FC';
+  public static yellow: string = '#fdf300';
+  public static gray: string = '#7e7e7e';
+}
+
+@Component({
+  selector: 'icon-rank',
+  template: `
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" *ngIf="maxRank > 1" class="rank" width="30" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient cy="10%" fy="0%" id="radialGradient">
+          <stop offset="0%" [attr.stop-color]="color"/>
+          <stop offset="100%" stop-color="#000"/>
+        </radialGradient>
+      </defs>
+      <rect x="0" y="0" width="30" height="16"/>
+      <rect x="7" y="1" width="16" height="14" opacity="0.7" fill="url(#radialGradient)"/>
+      <rect x="1" y="1" width="28" height="14" [attr.stroke]="color" fill="none" stroke-width="1"/>
+      <text x="15" y="12" [attr.fill]="color" text-anchor="middle" font-size="12">{{rank + '/' + maxRank}}</text>
+    </svg>`
+})
+
+export class IconRankComponent {
+  @Input() rank: number;
+  @Input() maxRank: number;
+  @Input() color: string;
+}

src/client/assets/icon-refresh.component.ts

@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({selector: 'icon-refresh', template: require('./images/refresh.svg')})
+
+export class IconRefreshComponent {
+}

src/client/build/masteries/mastery.component.spec.ts

@@ -3,13 +3,14 @@ import {BaseRequestOptions, Http} from '@angular/http';
 import {MockBackend} from '@angular/http/testing';
 import {ActivatedRoute} from '@angular/router';
 
+import {Colors} from '../../assets/icon-rank.component';
 import {LolApiService} from '../../services/lolapi.service';
 import {MockActivatedRoute} from '../../testing';
 
 import {MasteriesComponent} from './masteries.component';
 import {MasteryCategoryComponent} from './mastery-category.component';
 import {MasteryTierComponent} from './mastery-tier.component';
-import {Colors, MasteryComponent} from './mastery.component';
+import {MasteryComponent} from './mastery.component';
 
 const data = {
   id: 0,

src/client/build/masteries/mastery.component.ts

@@ -1,31 +1,15 @@
 import {NgClass, NgIf} from '@angular/common';
 import {Component, EventEmitter, Input, OnChanges, Output} from '@angular/core';
 
+import {Colors, IconRankComponent} from '../../assets/icon-rank.component';
 import {DDragonDirective} from '../../misc/ddragon.directive';
 
-export class Colors {
-  public static blue: string = '#4C99FC';
-  public static yellow: string = '#fdf300';
-  public static gray: string = '#7e7e7e';
-}
-
 @Component({
   selector: 'mastery',
-  directives: [NgIf, NgClass, DDragonDirective],
+  directives: [NgIf, NgClass, DDragonDirective, IconRankComponent],
   template: `
     <div *ngIf="data" [ngClass]="{enabled: enabled, active: active}" (click)="clicked()" (contextmenu)="rightClicked()" (dragend)="dragEnd()">
-      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" *ngIf="data.ranks > 1" class="rank" width="30" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <radialGradient cy="10%" fy="0%" id="radialGradient">
-            <stop offset="0%" [attr.stop-color]="color"/>
-            <stop offset="100%" stop-color="#000"/>
-          </radialGradient>
-        </defs>
-        <rect x="0" y="0" width="30" height="16"/>
-        <rect x="7" y="1" width="16" height="14" opacity="0.7" fill="url(#radialGradient)"/>
-        <rect x="1" y="1" width="28" height="14" [attr.stroke]="color" fill="none" stroke-width="1"/>
-        <text x="15" y="12" [attr.fill]="color" text-anchor="middle" font-size="12">{{rank + '/' + data.ranks}}</text>
-      </svg>
+      <icon-rank [rank]="rank" [maxRank]="data.ranks" [color]="color"></icon-rank>
       <img [attr.alt]="data.name" [ddragon]="'mastery/' + data.image.full">
       <div class="description">
         <h2>{{data.name}}</h2>

src/client/build/shop/shop.component.ts

@@ -1,8 +1,8 @@
 import {NgClass, NgFor, NgIf} from '@angular/common';
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 
+import {IconEyeComponent} from '../../assets/icon-eye.component';
 import {CapitalizePipe} from '../../misc/capitalize.pipe';
-import {DDragonDirective} from '../../misc/ddragon.directive';
 import {LoadingComponent} from '../../misc/loading.component';
 import {RetryComponent} from '../../misc/retry.component';
 import {ToIterablePipe} from '../../misc/to-iterable.pipe';
@@ -23,8 +23,8 @@ import {PreviewComponent} from './preview/preview.component';
   selector: 'shop',
   providers: [LolApiService, ItemsComponent],
   directives: [
-    NgFor, NgIf, NgClass, PreviewComponent, ItemComponent, DDragonDirective, LoadingComponent,
-    RetryComponent
+    NgFor, NgIf, NgClass, PreviewComponent, ItemComponent, LoadingComponent, RetryComponent,
+    IconEyeComponent
   ],
   pipes: [
     ToIterablePipe, TranslatePipe, CapitalizePipe, MapPipe, ChampionPipe, HidePipe, TagsPipe,
@@ -47,11 +47,7 @@ import {PreviewComponent} from './preview/preview.component';
         <div class="search">
           <input type="text" name="name" placeholder="Name" (keyup)="name=$event.target.value">
           <button type="button" name="show-disabled" title="Display hidden items">
-            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon eye" width="24" height="24" viewBox="0 0 24 24">
-              <path d="M0 0h24v24H0z" fill="none"/>
-              <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 
-              3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
-            </svg>
+            <icon-eye></icon-eye>
           </button>
         </div>
         <div class="items">

src/client/index.html

@@ -9,7 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="<%= webpackConfig.metadata.title %>">
 
-  <link rel="shortcut icon" href="/assets/images/favicon.ico" />
+  <link rel="shortcut icon" href="/images/favicon.ico" />
   <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
   <link href='/base.css' rel='stylesheet' type='text/css'>
 
@@ -19,22 +19,14 @@
 <body>
   <div class="header">
     <div class="align-center">
-      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon logo" id="logo" width="60" height="60" viewBox="0 0 60 60" fill="none" stroke="#000"
-      stroke-width="6">
-        <rect x="3" y="3" width="54" height="54" />
-        <rect x="21" y="3" width="36" height="36" />
-        <line x1="45" y1="21" x2="55" y2="21" />
-      </svg>
+      <%= require('./assets/images/logo.svg') %>
       <h1>Legend Builder</h1>
       <span class="alpha">Alpha</span>
     </div>
   </div>
   <div class="content">
     <app>
-      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" *ngIf="loading" class="icon load" viewBox="0 0 32 32" width="32" height="32">
-        <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4" />
-        <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z" />
-      </svg>
+      <%= require('./assets/images/load.svg') %>
     </app>
   </div>
 

src/client/misc/ddragon.directive.ts

@@ -15,7 +15,7 @@ export class DDragonDirective implements OnInit, OnChanges {
   @Input() x: number = -1;
   @Input() y: number = -1;
 
-  private defaultImg: string = '/assets/images/hourglass.svg';
+  private defaultImg: string = '/images/hourglass.svg';
   private realm: string = '';
 
   constructor(private el: ElementRef, private lolApi: LolApiService) {}

src/client/misc/error.component.ts

@@ -1,15 +1,13 @@
 import {Component, Input} from '@angular/core';
 
+import {IconErrorComponent} from '../assets/icon-error.component';
+
 @Component({
   selector: 'error',
+  directives: [IconErrorComponent],
   template: `
   <p *ngIf="error" class="error-item">
-    <span class="error">
-      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon error" viewBox="0 0 24 24" width="32" height="32">
-        <path d="M0 0h24v24H0z" fill="none"/>
-        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-      </svg>
-    </span>
+    <icon-error class="error"></icon-error>
     <span class="error error-text">{{message}}</span>
   </p>`
 })

src/client/misc/loading.component.ts

@@ -1,14 +1,13 @@
 import {NgIf} from '@angular/common';
 import {Component, Input} from '@angular/core';
 
+import {IconLoadComponent} from '../assets/icon-load.component';
+
 @Component({
   selector: 'loading',
-  directives: [NgIf],
+  directives: [NgIf, IconLoadComponent],
   template: `
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" *ngIf="loading" class="icon load" viewBox="0 0 32 32" width="32" height="32">
-      <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
-      <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"/>
-    </svg>`
+    <icon-load *ngIf="loading"></icon-load>`
 })
 
 export class LoadingComponent {

src/client/misc/retry.component.ts

@@ -1,21 +1,18 @@
 import {NgIf} from '@angular/common';
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 
+import {IconRefreshComponent} from '../assets/icon-refresh.component';
 import {ErrorComponent} from './error.component';
 
 @Component({
   selector: 'retry',
-  directives: [NgIf, ErrorComponent],
+  directives: [NgIf, ErrorComponent, IconRefreshComponent],
   template: `
   <p *ngIf="error" class="error-item">
     <error [error]="error"></error>
     <button (click)="retryClicked()">
       <p>Retry </p>
-      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon refresh" viewBox="0 0 24 24" width="32" height="32">>
-        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0
-        3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
-        <path d="M0 0h24v24H0z" fill="none"/>
-      </svg>
+      <icon-refresh></icon-refresh>
     </button>
   </p>`
 })