Remove run-time SVG theming to pure SCSS

Author: jelbourn

package.json

@@ -27,7 +27,6 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
-    "color": "^1.0.3",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"

src/_app-theme.scss

@@ -1,17 +1,18 @@
 @import '../node_modules/@angular/material/theming';
-@import './app/pages/homepage/homepage-theme';
+
+@import './app/pages/component-category-list/component-category-list-theme';
+@import './app/pages/component-list/component-list-theme';
 @import './app/pages/component-sidenav/component-sidenav-theme';
 @import './app/pages/component-viewer/component-viewer-theme';
-@import './app/pages/component-list/component-list-theme';
-@import './app/pages/component-category-list/component-category-list-theme';
 @import './app/pages/guide-list/guide-list-theme';
-
+@import './app/pages/homepage/homepage-theme';
+@import './app/shared/example-viewer/example-viewer-theme';
+@import './app/shared/footer/footer-theme';
+@import './app/shared/navbar/navbar-theme';
 @import './styles/api-theme';
 @import './styles/markdown-theme';
+@import './styles/svg-theme';
 @import './styles/tables-theme';
-@import './app/shared/navbar/navbar-theme';
-@import './app/shared/example-viewer/example-viewer-theme';
-@import './app/shared/footer/footer-theme';
 
 
 // Styles for the docs app that are based on the current theme.
@@ -39,17 +40,17 @@
     color: mat-color($primary, default-contrast);
   }
 
+  @include component-category-list-theme($theme);
+  @include component-list-theme($theme);
+  @include component-viewer-sidenav-theme($theme);
+  @include component-viewer-theme($theme);
   @include docs-site-api-theme($theme);
   @include docs-site-markdown-theme($theme);
+  @include docs-site-svg-theme($theme);
   @include docs-site-tables-theme($theme);
-  @include nav-bar-theme($theme);
-  @include component-viewer-sidenav-theme($theme);
-  @include home-page-theme($theme);
-  @include component-viewer-theme($theme);
-  @include component-list-theme($theme);
-  @include component-category-list-theme($theme);
-  @include nav-bar-theme($theme);
   @include example-viewer-theme($theme);
   @include footer-theme($theme);
   @include guide-list-theme($theme);
+  @include home-page-theme($theme);
+  @include nav-bar-theme($theme);
 }

src/app/pages/component-category-list/component-category-list.html

@@ -6,7 +6,7 @@
     <md-card-title>{{category.name}}</md-card-title>
     <p class="docs-component-category-list-card-summary">{{category.summary}}</p>
     <docs-svg-viewer class="docs-component-category-list-card-image"
-      [svgHref]="'../../../assets/img/component-categories/' + category.id + '.svg'">
+                     [src]="'../../../assets/img/component-categories/' + category.id + '.svg'">
     </docs-svg-viewer>
   </md-card>
 </div>

src/app/pages/component-list/component-list.html

@@ -3,8 +3,8 @@
     class="docs-component-list-item"
     [routerLink]="['/components/component/', component.id]">
     <docs-svg-viewer class="docs-component-list-item-icon"
-      [attr.aria-label]="component.name"
-      [svgHref]="'../../../assets/img/components/' + component.id + '.svg'">
+                     [attr.aria-label]="component.name"
+                     [src]="'../../../assets/img/components/' + component.id + '.svg'">
     </docs-svg-viewer>
     {{component.name}}
   </a>

src/app/pages/homepage/homepage.html

@@ -14,7 +14,7 @@ <h2> Material Design components for Angular</h2>
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
       <docs-svg-viewer
-          svgHref="../assets/img/homepage/sprintzerotoapp.svg"
+          src="../assets/img/homepage/sprintzerotoapp.svg"
           scaleToContainer="true"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
@@ -26,7 +26,7 @@ <h2>Sprint from Zero to App</h2>
   <div class="docs-homepage-row docs-homepage-reverse-row">
     <div class="docs-homepage-promo-img">
       <docs-svg-viewer
-          svgHref="../assets/img/homepage/fastandconsistent.svg"
+          src="../assets/img/homepage/fastandconsistent.svg"
           scaleToContainer="true"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
@@ -38,7 +38,7 @@ <h2>Fast and Consistent</h2>
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
       <docs-svg-viewer
-          svgHref="../assets/img/homepage/versatile.svg"
+          src="../assets/img/homepage/versatile.svg"
           scaleToContainer="true"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
@@ -49,7 +49,7 @@ <h2>Versatile</h2>
   </div>
   <div class="docs-homepage-row docs-homepage-reverse-row">
     <div class="docs-homepage-promo-img">
-      <docs-svg-viewer svgHref="../assets/img/homepage/optimized.svg"></docs-svg-viewer>
+      <docs-svg-viewer src="../assets/img/homepage/optimized.svg"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Optimized for Angular</h2>

src/app/shared/shared-module.ts

@@ -11,7 +11,6 @@ import {GuideItems} from './guide-items/guide-items';
 import {ThemeStorage} from './theme-picker/theme-storage/theme-storage';
 import {ThemePicker} from './theme-picker/theme-picker';
 import {NavBar} from './navbar/navbar';
-import {SvgBuilder} from './svg-viewer/svg-builder';
 import {SvgViewer} from './svg-viewer/svg-viewer';
 import {DocsMaterialModule} from '../app-module';
 
@@ -25,7 +24,7 @@ import {DocsMaterialModule} from '../app-module';
   ],
   declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer],
   exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer],
-  providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
+  providers: [DocumentationItems, GuideItems, ThemeStorage],
   entryComponents: [
     ExampleViewer,
   ],