Initial

.gitignore

@@ -0,0 +1,5 @@
+app/*.js
+app/*.map
+node_modules
+typings
+

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 David Czeck.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,46 @@
+# angular2-svg-icon
+
+The svg-icon is an Angular 2 component that allows for the continuation 
+of the AngularJS method for easily inlining SVGs explained by [Ben 
+Markowitz](https://www.mobomo.com/2014/09/angular-js-svg/) and others. 
+Including the SVG source inline allows for the graphic to be easily 
+styled by CSS.
+
+The technique made use of ng-include to inline the svg source into the 
+document. Angular 2, however, drops the support of ng-include, so this 
+is my work-around method.
+
+## Demo
+
+A [working demo](http://czeckd.github.io/angular2-svg-icon/demo/) shows
+the component in action. The demo shows an SVG image styled with CSS fill
+to be red, green, and blue.
+
+## Usage
+
+Copy `svg-icon.component.ts` into your app. Import the
+SvgIconComponent into a component and include it in that component's
+directives. For a usage example, see `demo-app.component.ts` and
+`demo-app.component.html`. Additionally, set-up `HTTP_PROVIDERS` in
+your app's bootstrap method and import `rxjs/add/operator/map` to 
+use the map. See `main.ts` for an example.
+
+### Getting started
+
+1. Clone this repo
+1. Install the dependencies:
+	```
+    npm install
+	```
+1. Run the TypeScript compiler and start the server:
+	```
+	npm start
+	```
+
+## License
+
+MIT
+
+
+## Author
+- David Czeck [@czeckd](https://github/czeckd)

app/demo-app.component.ts

@@ -0,0 +1,24 @@
+import {Component} from 'angular2/core';
+import {SvgIconComponent} from './svg-icon.component';
+
+@Component({
+	selector: 'demo-app',
+	directives: [ SvgIconComponent ],
+	template: `
+		<div style="width:100px;">
+			<div style="fill:red;">
+				<svg-icon src="images/eye.svg"></svg-icon>
+			</div>
+			<div style="fill:green;">
+				<svg-icon src="images/eye.svg"></svg-icon>
+			</div>
+			<div style="fill:blue;">
+				<svg-icon src="images/eye.svg"></svg-icon>
+			</div>
+		</div>
+	`
+})
+
+export class DemoAppComponent { 
+}
+

app/main.ts

@@ -0,0 +1,8 @@
+import {bootstrap}    from 'angular2/platform/browser'
+import {HTTP_PROVIDERS} from 'angular2/http';
+import 'rxjs/add/operator/map';
+
+
+import {DemoAppComponent} from './demo-app.component'
+
+bootstrap(DemoAppComponent, [ HTTP_PROVIDERS ]);

app/svg-icon.component.ts

@@ -0,0 +1,32 @@
+import {Component, Input, OnInit} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
+
+
+@Component({
+	selector: 'svg-icon',
+	template: `<div [innerHTML]="iconData"></div>`
+})
+
+
+export class SvgIconComponent implements OnInit {
+	@Input() src:string;
+
+	private iconData:string = '';
+
+	constructor(private http: Http) {
+	}
+
+	ngOnInit() {
+		this.loadSvg();
+	}
+
+	loadSvg() {
+		this.http.get( this.src )
+			.map( (res: Response) => res.text() )
+			.subscribe(
+				data => { this.iconData = data },
+				err => { console.error(err) }
+			);
+	}
+
+}

demo/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>SVG Icon Demo</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">    
+
+		<!-- 1. Load libraries -->
+		<script src="https://code.angularjs.org/tools/typescript.js"></script>
+
+		<!-- IE required polyfills, in this exact order -->
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.0/es6-shim.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system-polyfills.js"></script>
+
+		<script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system.src.js"></script>
+		<script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
+		<script src="https://code.angularjs.org/2.0.0-beta.9//angular2.dev.js"></script>
+		<script src="https://code.angularjs.org/2.0.0-beta.9/http.dev.js"></script>
+
+		<base href="../"></base>
+
+		<!-- 2. Configure SystemJS -->
+		<script>
+		System.config({
+			// Use typescript for compilation (slow!)
+			transpiler: 'typescript',
+
+			// typescript compiler options
+			typescriptOptions: {
+				emitDecoratorMetadata: true
+			},
+
+			// Map tells the System loader where to look for things
+			map: {
+				app: "../app"
+			},
+			packages: {
+				app: {
+					main: '../app/main.ts',
+					defaultExtension: 'ts'
+				}
+			}
+		});
+		System.import('app/main').then(null, console.error.bind(console));
+		</script>
+	</head>
+
+
+	<!-- 3. Display the application -->
+	<body>
+		<demo-app>Loading...</demo-app>
+	</body>
+
+
+</html>

images/README.md

@@ -0,0 +1,4 @@
+# About eye.svg
+The eye.svg is modified to remove the height and width attributes from the file. 
+The original found as part of the Font-Awesome-SVG-PNG library on GitHub at 
+https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/eye.svg.

index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>SVG Icon Demo</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">    
+
+		<script>
+		if (window.location.href.indexOf('github.io') !== -1 && window.location.href.indexOf('demo') === -1) {
+			window.location.href = window.location.href + 'demo/';
+		}
+		</script>
+
+		<!-- 1. Load libraries -->
+		<!-- IE required polyfills, in this exact order -->
+		<script src="node_modules/es6-shim/es6-shim.min.js"></script>
+		<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
+		<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+		<script src="node_modules/systemjs/dist/system.src.js"></script>
+		<script src="node_modules/rxjs/bundles/Rx.js"></script>
+		<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+		<script src="node_modules/angular2/bundles/http.dev.js"></script>
+
+		<!-- 2. Configure SystemJS -->
+		<script>
+		System.config({
+			packages: {        
+				app: {
+					format: 'register',
+					defaultExtension: 'js'
+				}
+			}
+		});
+		System.import('app/main').then(null, console.error.bind(console));
+		</script>
+	</head>
+
+
+	<!-- 3. Display the application -->
+	<body>
+		<demo-app>Loading...</demo-app>
+	</body>
+
+</html>

package.json

@@ -0,0 +1,35 @@
+{
+	"name": "angular2-svg-icon",
+	"description": "Angular 2 component for inlining SVGs allowing them to be easily styled with CSS.",
+	"version": "1.0.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/czeckd/angular2-svg-icon.git"
+	},
+	"author": "David Czeck",
+	"license": "MIT",
+	"scripts": {
+		"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
+		"tsc": "tsc",
+		"tsc:w": "tsc -w",
+		"lite": "lite-server",
+		"typings": "typings",
+		"postinstall": "typings install" 
+	},
+	"dependencies": {
+		"angular2": "2.0.0-beta.9",
+		"systemjs": "0.19.24",
+		"es6-promise": "^3.0.2",
+		"es6-shim": "^0.33.3",
+		"reflect-metadata": "0.1.2",
+		"rxjs": "5.0.0-beta.2",
+		"zone.js": "0.5.15"
+	},
+	"devDependencies": {
+		"concurrently": "^2.0.0",
+		"lite-server": "^2.1.0",
+		"typescript": "^1.8.7",
+		"typings":"^0.7.5"
+	}
+}
+

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"module": "system",
+		"moduleResolution": "node",
+		"sourceMap": true,
+		"emitDecoratorMetadata": true,
+		"experimentalDecorators": true,
+		"removeComments": false,
+		"noImplicitAny": false
+	},
+	"exclude": [
+		"node_modules",
+		"typings/main",
+		"typings/main.d.ts",
+		"app/OLD"
+	]
+}
+

typings.json

@@ -0,0 +1,6 @@
+{
+	"ambientDependencies": {
+		"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
+		"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71"
+	}
+}