Merge pull request #16 from czeckd/packaging

Packaging for npm

.gitignore

@@ -1,4 +1,4 @@
 node_modules
-app/**/*.js
-*.js.map
+runt
+dist
 **~

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 David Czeck.
+Copyright (c) 2017 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

README.md

@@ -1,68 +1,65 @@
-# angular-svg-icon
+[![npm version](https://badge.fury.io/js/angular-svg-icon.svg)](https://badge.fury.io/js/angular-svg-icon)
 
-## Demo
+Angular SVG Icon 
+=========
 
-The [working demo](http://czeckd.github.io/angular-svg-icon/demo/) shows the 
-component and registry service in action. The demo provides a form where width 
-and fill color can be adjusted and displays the corresponding HTML and CSS.
+The **angular-svg-icon** is an Angular 2+ service and component that provides a 
+means to inline SVG images to allow for them to be easily styled by CSS and 
+code.
 
-## svg-icon
+The service provides an icon registery that loads and caches a svg indexed by 
+its url. The component is responsible for displaying the svg. After getting the 
+svg from the registry it clones the `SVGElement` and the svg to the component's 
+inner HTML.
 
-The `svg-icon` is comprised of two parts: an icon registery and a component. The
-icon registry is responsible for loading and caching a svg, which is indexed by
-its url.
+A [working demo](http://czeckd.github.io/angular-svg-icon/demo/) shows solution 
+in action.
 
-The component is responsible for displaying the svg. After getting the svg from
-the registry it clones the `SVGElement` and the svg to the component's inner 
-HTML.
-
-## Background
+## How to use?
+```
+$ npm i angular-svg-icon --save
+```
 
-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.
+## Integration
 
-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.
+The **angular-svg-icon** should work as-is with webpack/angular-cli. Just add 
+the ``AngularSvgIconModule``.
 
-The [icon component](https://www.npmjs.com/package/@angular2-material/icon) from 
-[angular/material2](https://github.com/angular/material2) used to have a direct
-means to load svg using the `<md-icon svgSrc="">` component attribute. This was
-removed due to security concerns. Those concerns still relevant for this component.
+```typescript
+import { AngularSvgIconModule } from 'angular-svg-icon';
 
+@NgModule({
+    imports: [ AngularSvgIconModule ],
+    ...
+})
+export class AppModule {}
+```
 ## Usage
-
-Import `HttpModule`, `SvgIconComponent`, and `SvgIconRegistryService` into your
-app's main module. Example:
-
+Basic usage is:
+```html
+<svg-icon src="path/to/icon.svg"></svg-icon>
+```
+An example of styling the svg:
+```html
+<svg-icon src="images/eye.svg" style="fill:green;width:90px;"></svg-icon>
 ```
-import { HttpModule } from '@angular/http';
-
-import { SvgIconComponent } from './svg-icon.component';
-import { SvgIconRegistryService } from './svg-icon-registry.service';
 
+## Background
 
-@NgModule({
-    imports:         [ HttpModule ],
-    declarations:    [ SvgIconComponent ],
-    providers:       [ SvgIconRegistryService ]
-})
-```
+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.
 
-### Getting started
+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.
 
-1. Clone this repo
-1. Install the dependencies:
-	```
-    npm install
-	```
-1. Run the TypeScript compiler and start the server:
-	```
-	npm start
-	```
+*Note:* The [icon 
+component](https://www.npmjs.com/package/@angular2-material/icon) from 
+[angular/material2](https://github.com/angular/material2) used to have a direct 
+means to load svg similar to this, but this functionality was removed because of 
+security concerns.
 
 ## License
 
@@ -71,3 +68,4 @@ MIT
 
 ## Author
 - David Czeck [@czeckd](https://github/czeckd)
+

app/app.module.ts

@@ -1,18 +1,13 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-
-import { SvgIconComponent } from './svg-icon.component';
-import { SvgIconRegistryService } from './svg-icon-registry.service';
 
+import { AngularSvgIconModule } from 'angular-svg-icon';
 import { DemoAppComponent } from './demo-app.component';
 
-
 @NgModule({
-	imports:         [ BrowserModule, FormsModule, HttpModule ],
-	declarations:    [ DemoAppComponent, SvgIconComponent ],
-	providers:       [ SvgIconRegistryService ],
+	imports:         [ BrowserModule, FormsModule, AngularSvgIconModule ],
+	declarations:    [ DemoAppComponent ],
 	bootstrap:       [ DemoAppComponent ]
 
 })

demo/systemjs.config.js

@@ -1,46 +1,61 @@
-(function (global) {
+(function(global) {
 
   var ngVer = '@4.0.0';
 
-	var paths = {
-		'npm:' : 'https://unpkg.com/'
-	}
-
-	var map = {
-		'app'        : 'app',
-		'rxjs'       : 'npm:[email protected]',
-		'typescript' : 'npm:[email protected]/lib/typescript.js'
-	};
-
-	var pkgs = [
-		'common', 'compiler', 'core', 'forms', 'http', 'platform-browser', 'platform-browser-dynamic'
-	];
-
-	pkgs.forEach(function(name) {
-		var key = '@angular/' + name;
-		var value = 'npm:@angular/' + name + ngVer + '/bundles/' + name + '.umd.js';
-		map[key] = value;
-	});
-
-	System.config({
-
-		transpiler: 'typescript',
-    	typescriptOptions: {
-			"emitDecoratorMetadata": true
-		},
-
-	    paths: paths,
-		map: map,
-
-		packages: {
-			app: {
-        		main: './main.ts',
-				defaultExtension: 'ts'
-			},
-			rxjs: {
-				defaultExtension: 'js'
-			}
-		}
-	});
-})(this);
+  var paths = {
+    'npm:' : 'https://unpkg.com/'
+  }
+
+  // map tells the System loader where to look for things
+  var map = {
+    'app':  'app',
+    'rxjs': 'npm:[email protected]',
+    '@angular': 'npm:@angular',
+	'typescript' : 'npm:[email protected]/lib/typescript.js',
+    'angular-svg-icon': 'lib'
+  };
+
+  // packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app':  { main: 'main.ts',  defaultExtension: 'ts' },
+    'rxjs': { defaultExtension: 'js' },
+    'angular-svg-icon': { main: 'index.ts', defaultExtension: 'ts' }
+  };
+
+  var ngPackageNames = [
+    'common',
+    'compiler',
+    'core',
+	'forms',
+    'http',
+    'platform-browser',
+    'platform-browser-dynamic'
+  ];
+
+  ngPackageNames.forEach(function(pkgName) {
+    map['@angular/'+pkgName] = 'npm:@angular/' + pkgName + ngVer;
+  });
+
+  // Add package entries for angular packages
+  ngPackageNames.forEach(function(pkgName) {
+    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+	transpiler: 'typescript',
+    typescriptOptions: {
+      emitDecoratorMetadata: true
+    },
+    paths: paths,
+    map: map,
+    packages: packages
+  }
+
+  // filterSystemConfig - index.html's chance to modify config before it is registered.
+  if (global.filterSystemConfig) {
+    global.filterSystemConfig(config);
+  }
+
+  System.config(config);
 
+})(this);

index.html

@@ -3,6 +3,7 @@
 <head>
 	<title>Angular 2+ SVG Icon Demo</title>
 	<meta charset="UTF-8">
+	<meta name="author" content="David Czeck">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 

lib/angular-svg-icon.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpModule } from '@angular/http';
+
+
+import { SvgIconComponent, SVG_ICON_REGISTRY_PROVIDER } from './svg-icon.component';
+
+@NgModule({
+	imports:	  [
+		CommonModule,
+		HttpModule
+	],
+	declarations: [ SvgIconComponent ],
+	providers:    [ SVG_ICON_REGISTRY_PROVIDER ],
+	exports:      [ SvgIconComponent ]
+})
+
+export class AngularSvgIconModule {}

lib/index.ts

@@ -0,0 +1,4 @@
+export * from './angular-svg-icon.module';
+export * from './svg-icon-registry.service';
+export * from './svg-icon.component';
+

app/svg-icon.component.ts → lib/svg-icon.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, Input, OnInit, Renderer } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, Optional, Renderer, SkipSelf } from '@angular/core';
+import { Http } from '@angular/http';
 
 import { SvgIconRegistryService } from './svg-icon-registry.service';
 
@@ -34,3 +35,12 @@ export class SvgIconComponent implements OnInit {
 	}
 }
 
+export function SVG_ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry:SvgIconRegistryService, http:Http) {
+	return parentRegistry || new SvgIconRegistryService(http);
+}
+
+export const SVG_ICON_REGISTRY_PROVIDER = {
+	provide: SvgIconRegistryService,
+	deps: [ [new Optional(), new SkipSelf(), SvgIconRegistryService], Http],
+	useFactory: SVG_ICON_REGISTRY_PROVIDER_FACTORY
+}

package.json

@@ -1,40 +1,56 @@
 {
   "name": "angular-svg-icon",
   "description": "Angular 2+ component for inlining SVGs allowing them to be easily styled with CSS.",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-svg-icon.git"
   },
   "author": "David Czeck",
   "license": "MIT",
+  "typings": "index.d.ts",
+  "keywords": [
+    "angular",
+    "angular2",
+    "angular4",
+    "svg",
+    "icon"
+  ],
   "scripts": {
-    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",    
+    "start": "rimraf runt && npm run dist && tsc && concurrently \"tsc -w\" \"lite-server\" ",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
+    "clean": "rimraf runt dist",
+    "dist": "tools/mkdist",
     "lite": "lite-server",
     "lint": "tslint -c tslint.json ./app/**/*.ts -t verbose || true"
   },
-  "dependencies": {
-    "@angular/common": "~4.0.0",
-    "@angular/compiler": "~4.0.0",
-    "@angular/core": "~4.0.0",
-    "@angular/forms": "~4.0.0",
-    "@angular/http":  "~4.0.0",
-    "@angular/platform-browser": "~4.0.0",
-    "@angular/platform-browser-dynamic": "~4.0.0",
-    "core-js": "^2.4.1",
-    "systemjs": "0.19.47",
-    "rxjs": "^5.2.0",
-    "zone.js": "^0.8.4"
+  "peerDependencies": {
+    "@angular/core": "^2.4.0 || ^4.0.0",
+    "@angular/http": "^2.4.0 || ^4.0.0",
+    "rxjs": "^5.2.0"
   },
   "devDependencies": {
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
     "@angular/compiler-cli": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
     "@types/core-js": "^0.9.39",
     "@types/node": "^6.0.60",
     "concurrently": "^2.2.0",
+    "core-js": "^2.4.1",
     "lite-server": "^2.2.2",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.41.6",
+    "rxjs": "^5.2.0",
+    "systemjs": "0.19.47",
+    "ts-node": "^3.0.2",
     "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
+    "typescript": "~2.2.0",
+    "zone.js": "^0.8.4"
   }
 }