diff --git a/README.md b/README.md
index 3111814..fe65fda 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
Angular SVG Icon
=========
-The **angular-svg-icon** is an Angular 4.3+ service and component that provides a
+The **angular-svg-icon** is an Angular 6 service and component that provides a
means to inline SVG files to allow for them to be easily styled by CSS and code.
The service provides an icon registery that loads and caches a SVG indexed by
@@ -11,14 +11,17 @@ 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.
-A [working demo](http://czeckd.github.io/angular-svg-icon/demo/) shows solution in action.
+This [demo](http://czeckd.github.io/angular-svg-icon/demo/) shows this module in action.
## How to use?
```
$ npm i angular-svg-icon --save
```
-(**Note:** For use Angular 2.4 through Angular 4.2, please install angular-svg-icon@4.2.6
-and see the module's accompanying README.md for instructions.)
+**Note on earlier versions of ngx:**
+- For Angular 4.3 through Angular 5.x, use angular-svg-icon@5.1.1
+- For Angular 2.4 through Angular 4.2, use angular-svg-icon@4.2.6
+
+See the module's accompanying README.md for instructions.
## Integration
@@ -30,8 +33,8 @@ import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';
@NgModule({
- imports: [ HttpClientModule, AngularSvgIconModule ],
- ...
+ imports: [ HttpClientModule, AngularSvgIconModule ],
+ ...
})
export class AppModule {}
```
@@ -60,23 +63,29 @@ Include the ``private iconReg:SvgIconRegistryService`` in the constructor:
constructor(private iconReg:SvgIconRegistryService) { }
```
-The registry has two public functions: `loadSvg(string)` and `unloadSvg(string)`.
-
-To preload a svg file into the registry:
+The registry has three public functions: `loadSvg(string)`, `addSvg(string, string)`, and `unloadSvg(string)`.
+To preload a SVG file from a URL into the registry:
```typescript
{
- ...
- this.iconReg.loadSvg('foo.svg');
+ ...
+ this.iconReg.loadSvg('foo.svg');
}
```
-
-To unload a svg from the registry.
-
+To add a SVG from a sting:
+```typescript
+{
+ ...
+ this.iconReg.addSvg('box',
+ ''
+ );
+}
+```
+To unload a SVG from the registry.
```typescript
{
- ...
- this.iconReg.unloadSvg('foo.svg');
+ ...
+ this.iconReg.unloadSvg('foo.svg');
}
```
diff --git a/app/app.module.ts b/app/app.module.ts
index 9b39ef5..7679ec0 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
diff --git a/app/demo-app.component.ts b/app/demo-app.component.ts
index 819012b..5f8566e 100644
--- a/app/demo-app.component.ts
+++ b/app/demo-app.component.ts
@@ -32,7 +32,7 @@ export class DemoAppComponent {
constructor(private registry:SvgIconRegistryService) {
}
- getStyle(): string {
+ getStyle() :string {
return JSON.stringify(this.getNgStyle()).replace(/\"/g, '\'');
}
diff --git a/demo/systemjs.config.js b/demo/systemjs.config.js
index 9f8b64b..2706f52 100644
--- a/demo/systemjs.config.js
+++ b/demo/systemjs.config.js
@@ -1,57 +1,65 @@
(function(global) {
- var ngVer = '@5.0.0';
-
- var paths = {
- 'npm:' : 'https://unpkg.com/'
- }
-
- // map tells the System loader where to look for things
- var map = {
- 'app': 'app',
- 'angular-svg-icon': 'lib',
- 'rxjs': 'npm:rxjs@5.5.2',
- 'tslib': 'npm:tslib@1.7.1',
- 'typescript' : 'npm:typescript@2.4.2/lib/typescript.js',
-
- '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
- '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
- '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
- '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
- '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
- '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
- '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js'
- };
-
- // packages tells the System loader how to load when no filename and/or no extension
- var packages = {
- 'app': { main: 'main.ts', defaultExtension: 'ts' },
- 'angular-svg-icon': { main: 'index.ts', defaultExtension: 'ts' },
-
- 'rxjs': { defaultExtension: 'js' },
- 'tslib': { main: 'tslib.js', defaultExtension: 'js' }
- };
-
- var config = {
- transpiler: 'typescript',
- typescriptOptions: {
- sourceMap: true,
- emitDecoratorMetadata: true,
- experimentalDecorators: true
- },
- meta: {
- typescript: { exports: 'ts' }
- },
- 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);
+ var ngVer = '@6.0.0';
+
+ var paths = {
+ 'npm:' : 'https://unpkg.com/'
+ }
+
+ // map tells the System loader where to look for things
+ var map = {
+ 'app': 'app',
+ 'angular-svg-icon': 'lib',
+ 'rxjs': 'npm:rxjs@6.1.0',
+ 'rxjs/operators': 'npm:rxjs@6.1.0/operators',
+ 'tslib': 'npm:tslib@1.7.1',
+ 'typescript' : 'npm:typescript@2.4.2/lib/typescript.js',
+
+ '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+ '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+ '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
+ '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+ '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+ '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+ '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js'
+ };
+
+ // packages tells the System loader how to load when no filename and/or no extension
+ var packages = {
+ 'app': { main: 'main.ts', defaultExtension: 'ts' },
+ 'angular-svg-icon': { main: 'index.ts', defaultExtension: 'ts' },
+
+ 'rxjs': {
+ 'main': 'index.js',
+ 'defaultExtension': 'js'
+ },
+ 'rxjs/operators': {
+ 'main': 'index.js',
+ 'defaultExtension': 'js'
+ },
+ 'tslib': { main: 'tslib.js', defaultExtension: 'js' }
+ };
+
+ var config = {
+ transpiler: 'typescript',
+ typescriptOptions: {
+ sourceMap: true,
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true
+ },
+ meta: {
+ typescript: { exports: 'ts' }
+ },
+ 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);
diff --git a/lib/package.json b/lib/package.json
index 2dbaf36..479a421 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,8 +1,8 @@
{
"$schema": "../../node_modules/ng-packagr/package.schema.json",
"name": "angular-svg-icon",
- "description": "Angular 5 component for inlining SVGs allowing them to be easily styled with CSS.",
- "version": "5.1.1",
+ "description": "Angular 6 component for inlining SVGs allowing them to be easily styled with CSS.",
+ "version": "6.0.0",
"repository": {
"type": "git",
"url": "https://github.com/czeckd/angular-svg-icon.git"
@@ -15,9 +15,9 @@
"icon"
],
"peerDependencies": {
- "@angular/core": "^4.3.0 || ^5.0.0 || ^6.0.0",
- "@angular/common": "^4.3.0 || ^5.0.0 || ^6.0.0",
- "rxjs": "^5.5.2"
+ "@angular/core": "^6.0.0",
+ "@angular/common": "^6.0.0",
+ "rxjs": "^6.0.0"
},
"ngPackage": {
"lib": {
diff --git a/lib/src/svg-icon-registry.service.ts b/lib/src/svg-icon-registry.service.ts
index 471bea1..9350f46 100644
--- a/lib/src/svg-icon-registry.service.ts
+++ b/lib/src/svg-icon-registry.service.ts
@@ -1,16 +1,8 @@
import { Injectable, Optional, SkipSelf } from '@angular/core';
import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
-
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/finally';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/share';
-import 'rxjs/add/observable/throw';
-
+import { Observable, of as observableOf, throwError as observableThrowError } from 'rxjs';
+import { map, tap, catchError, finalize, share } from 'rxjs/operators';
@Injectable()
export class SvgIconRegistryService {
@@ -21,42 +13,50 @@ export class SvgIconRegistryService {
constructor(private http:HttpClient) {
}
- loadSvg(url:string): Observable {
+ /** Add a SVG to the registry by passing a name and the SVG. */
+ addSvg(name:string, data:string) {
+ if (!this.iconsByUrl.has(name)) {
+ const div = document.createElement('DIV');
+ div.innerHTML = data;
+ const svg = div.querySelector('svg');
+ this.iconsByUrl.set(name, svg);
+ }
+ }
+
+ /** Load a SVG to the registry from a URL. */
+ loadSvg(url:string) : Observable {
if (this.iconsByUrl.has(url)) {
- return Observable.of(this.iconsByUrl.get(url));
+ return observableOf(this.iconsByUrl.get(url));
} else if (this.iconsLoadingByUrl.has(url)) {
return this.iconsLoadingByUrl.get(url);
} else {
- const o = > this.http.get(url, { responseType: 'text' })
- .map(svg => {
+ const o = > this.http.get(url, { responseType: 'text' }).pipe(
+ map(svg => {
const div = document.createElement('DIV');
div.innerHTML = svg;
return div.querySelector('svg');
- })
- .do(svg => {
- this.iconsByUrl.set(url, svg);
- })
- .catch(err => {
+ }),
+ tap (svg => this.iconsByUrl.set(url, svg) ),
+ catchError(err => {
console.error(err);
- return Observable.throw(err);
- })
- .finally(() => {
- this.iconsLoadingByUrl.delete(url);
- })
- .share();
+ return observableThrowError(err);
+ }),
+ finalize(() => this.iconsLoadingByUrl.delete(url) ),
+ share()
+ );
this.iconsLoadingByUrl.set(url, o);
return o;
}
}
+ /** Remove a SVG from the registry by URL (or name). */
unloadSvg(url:string) {
if (this.iconsByUrl.has(url)) {
this.iconsByUrl.delete(url);
}
}
-
}
export function SVG_ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry:SvgIconRegistryService, http:HttpClient) {
diff --git a/lib/src/svg-icon.component.ts b/lib/src/svg-icon.component.ts
index 166905c..64d39f7 100644
--- a/lib/src/svg-icon.component.ts
+++ b/lib/src/svg-icon.component.ts
@@ -2,7 +2,7 @@ import { Component, DoCheck, ElementRef, HostBinding, Input,
KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDiffers,
OnChanges, OnDestroy, OnInit, Renderer2, SimpleChange } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
import { SvgIconRegistryService } from './svg-icon-registry.service';
@@ -29,7 +29,7 @@ export class SvgIconComponent implements OnInit, OnDestroy, OnChanges, DoCheck {
private svg:SVGElement;
private icnSub:Subscription;
private differ:KeyValueDiffer;
- private _svgStyle: {[key: string] : string};
+ private _svgStyle: {[key:string]:string};
constructor(private element:ElementRef,
private differs:KeyValueDiffers,
@@ -82,10 +82,8 @@ export class SvgIconComponent implements OnInit, OnDestroy, OnChanges, DoCheck {
}
private resetDiffer() {
- if (this._svgStyle) {
- if (!this.differ) {
- this.differ = this.differs.find(this._svgStyle).create();
- }
+ if (this._svgStyle && !this.differ) {
+ this.differ = this.differs.find(this._svgStyle).create();
}
}
diff --git a/package.json b/package.json
index 100669a..a506922 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,13 @@
{
"name": "angular-svg-icon",
- "description": "Angular 5 component for inlining SVGs allowing them to be easily styled with CSS.",
- "version": "5.1.1",
+ "description": "Angular 6 component for inlining SVGs allowing them to be easily styled with CSS.",
+ "version": "6.0.0",
"repository": {
"type": "git",
"url": "https://github.com/czeckd/angular-svg-icon.git"
},
"author": "David Czeck",
"license": "MIT",
- "typings": "index.d.ts",
"keywords": [
"angular",
"svg",
@@ -24,31 +23,31 @@
"lite": "lite-server"
},
"peerDependencies": {
- "@angular/core": "^4.3.0 || ^5.0.0 || ^6.0.0",
- "@angular/common": "^4.3.0 || ^5.0.0 || ^6.0.0",
- "rxjs": "^5.5.2"
+ "@angular/core": "^6.0.0",
+ "@angular/common": "^6.0.0",
+ "rxjs": "^6.0.0"
},
"devDependencies": {
- "@angular/common": "^5.2.10",
- "@angular/compiler": "^5.2.10",
- "@angular/compiler-cli": "^5.2.10",
- "@angular/core": "^5.2.10",
- "@angular/forms": "^5.2.10",
- "@angular/platform-browser": "^5.2.10",
- "@angular/platform-browser-dynamic": "^5.2.10",
- "@types/core-js": "^0.9.46",
- "@types/node": "^8.10.10",
+ "@angular/common": "^6.0.0",
+ "@angular/compiler": "^6.0.0",
+ "@angular/compiler-cli": "^6.0.0",
+ "@angular/core": "^6.0.0",
+ "@angular/forms": "^6.0.0",
+ "@angular/platform-browser": "^6.0.0",
+ "@angular/platform-browser-dynamic": "^6.0.0",
+ "@types/node": "~8.9.4",
+ "codelyzer": "^4.3.0",
"concurrently": "^2.2.0",
"core-js": "^2.5.5",
"lite-server": "^2.2.2",
"ng-packagr": "^2.4.2",
"rimraf": "^2.6.1",
"rollup": "^0.51.1",
- "rxjs": "^5.5.10",
+ "rxjs": "^6.0.0",
"systemjs": "0.19.47",
- "ts-node": "^3.3.0",
- "tslint": "~5.8.0",
- "typescript": "^2.6.2",
+ "ts-node": "~5.0.1",
+ "tslint": "~5.9.1",
+ "typescript": "~2.7.2",
"zone.js": "^0.8.26"
}
}
diff --git a/systemjs.config.js b/systemjs.config.js
index d93be9d..7345a35 100644
--- a/systemjs.config.js
+++ b/systemjs.config.js
@@ -6,6 +6,7 @@
'angular-svg-icon': 'runt/lib',
'rxjs': 'npm:rxjs',
+ 'rxjs/operators': 'npm:rxjs/operators',
'tslib': 'npm:tslib',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
@@ -19,11 +20,26 @@
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
- 'app': { main: 'main.js', defaultExtension: 'js' },
- 'angular-svg-icon': { main: 'index.js', defaultExtension: 'js' },
-
- 'rxjs': { defaultExtension: 'js' },
- 'tslib': { main: 'tslib.js', defaultExtension: 'js' },
+ 'app': {
+ 'main': 'main.js',
+ 'defaultExtension': 'js'
+ },
+ 'angular-svg-icon': {
+ 'main': 'index.js',
+ 'defaultExtension': 'js'
+ },
+ 'rxjs': {
+ 'main': 'index.js',
+ 'defaultExtension': 'js'
+ },
+ 'rxjs/operators': {
+ 'main': 'index.js',
+ 'defaultExtension': 'js'
+ },
+ 'tslib': {
+ 'main': 'tslib.js',
+ 'defaultExtension': 'js'
+ }
};
var config = {
diff --git a/tslint.json b/tslint.json
index 56480eb..39d7b3a 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,21 +1,37 @@
{
+ "rulesDirectory": [
+ "node_modules/codelyzer"
+ ],
"rules": {
+ "arrow-return-shorthand": true,
+ "callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
- "curly": false,
+ "curly": [
+ true,
+ "ignore-same-line"
+ ],
"eofline": true,
+ "forin": true,
+ "import-blacklist": [
+ true,
+ "rxjs/Rx"
+ ],
+ "import-spacing": true,
"indent": [
true,
"tabs"
],
+ "interface-over-type-literal": true,
"label-position": true,
"max-line-length": [
true,
140
],
+ "member-access": false,
"member-ordering": [
true,
"private-before-public",
@@ -24,37 +40,66 @@
],
"no-arg": true,
"no-bitwise": true,
+ "no-console": [
+ true,
+ "debug",
+ "info",
+ "time",
+ "timeEnd",
+ "trace"
+ ],
"no-construct": true,
+ "no-debugger": true,
"no-duplicate-variable": true,
- "no-empty": true,
+ "no-empty": false,
+ "no-empty-interface": true,
"no-eval": true,
- "no-inferrable-types": true,
+ "no-inferrable-types": [
+ true,
+ "ignore-params"
+ ],
+ "no-misused-new": true,
+ "no-non-null-assertion": true,
"no-shadowed-variable": true,
"no-string-literal": false,
+ "no-string-throw": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
+ "no-unnecessary-initializer": true,
"no-unused-expression": true,
- "no-unused-variable": true,
"no-var-keyword": true,
+ "object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
- "check-catch",
"check-else",
"check-whitespace"
],
+ "prefer-const": true,
"quotemark": [
true,
"single"
],
"radix" : true,
"semicolon": [
+ true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
+ "typedef-whitespace": [
+ true,
+ {
+ "call-signature": "space",
+ "index-signature": "nospace",
+ "parameter": "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ }
+ ],
+ "unified-signatures": true,
"variable-name": false,
"whitespace": [
true,
@@ -62,7 +107,15 @@
"check-decl",
"check-operator",
"check-separator"
- ]
+ ],
+ "use-input-property-decorator": true,
+ "use-output-property-decorator": true,
+ "use-host-property-decorator": true,
+ "no-input-rename": true,
+ "no-output-rename": true,
+ "use-life-cycle-interface": true,
+ "use-pipe-transform-interface": true,
+ "component-class-suffix": true,
+ "directive-class-suffix": true
}
}
-