From 17acda1c5ef2fcd59b3274383c063efc6bef1463 Mon Sep 17 00:00:00 2001 From: David Czeck Date: Mon, 30 Apr 2018 00:46:23 -0700 Subject: [PATCH 1/4] Added addSvg to load from string --- lib/src/svg-icon-registry.service.ts | 10 +++++++++- lib/src/svg-icon.component.ts | 6 ++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/lib/src/svg-icon-registry.service.ts b/lib/src/svg-icon-registry.service.ts index 471bea1..a7d2320 100644 --- a/lib/src/svg-icon-registry.service.ts +++ b/lib/src/svg-icon-registry.service.ts @@ -21,6 +21,15 @@ export class SvgIconRegistryService { constructor(private http:HttpClient) { } + 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); + } + } + loadSvg(url:string): Observable { if (this.iconsByUrl.has(url)) { @@ -56,7 +65,6 @@ export class SvgIconRegistryService { 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..b87efbf 100644 --- a/lib/src/svg-icon.component.ts +++ b/lib/src/svg-icon.component.ts @@ -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(); } } From 264eef0c2f3f2ed0390addd46dbfe4dfc497060d Mon Sep 17 00:00:00 2001 From: David Czeck Date: Sun, 6 May 2018 09:43:36 -0700 Subject: [PATCH 2/4] Update for Angular 6 --- README.md | 40 ++++++---- app/app.module.ts | 2 +- app/demo-app.component.ts | 2 +- demo/systemjs.config.js | 114 ++++++++++++++------------- lib/package.json | 10 +-- lib/src/svg-icon-registry.service.ts | 42 ++++------ lib/src/svg-icon.component.ts | 4 +- package.json | 37 +++++---- systemjs.config.js | 26 ++++-- tslint.json | 67 ++++++++++++++-- 10 files changed, 210 insertions(+), 134 deletions(-) diff --git a/README.md b/README.md index 3111814..45e432a 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 earlyer 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,28 @@ 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: +``` +{ + ... + this.inconReg.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 a7d2320..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,6 +13,7 @@ export class SvgIconRegistryService { constructor(private http:HttpClient) { } + /** 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'); @@ -30,36 +23,35 @@ export class SvgIconRegistryService { } } - loadSvg(url:string): Observable { + /** 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); diff --git a/lib/src/svg-icon.component.ts b/lib/src/svg-icon.component.ts index b87efbf..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, 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 } } - From 4182e0ae1b8ae78457c3b308d42e4d33c23157a4 Mon Sep 17 00:00:00 2001 From: David Czeck Date: Sun, 6 May 2018 09:53:24 -0700 Subject: [PATCH 3/4] Improve wording and formatting --- README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 45e432a..f2c9aad 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ This [demo](http://czeckd.github.io/angular-svg-icon/demo/) shows this module in ``` $ npm i angular-svg-icon --save ``` -**Note on earlyer versions of ngx:** +**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 @@ -68,16 +68,17 @@ The registry has three public functions: `loadSvg(string)`, `addSvg(string, stri To preload a SVG file from a URL into the registry: ```typescript { - ... - this.iconReg.loadSvg('foo.svg'); + ... + this.iconReg.loadSvg('foo.svg'); } ``` To add a SVG from a sting: ``` { - ... - this.inconReg.addSvg('box', - ''); + ... + this.inconReg.addSvg('box', + '' + ); } ``` To unload a SVG from the registry. From 0cf3c5f6c7e061c3e8fbda854553fb39f4808cba Mon Sep 17 00:00:00 2001 From: David Czeck Date: Sun, 6 May 2018 09:56:34 -0700 Subject: [PATCH 4/4] Fix formatting --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f2c9aad..fe65fda 100644 --- a/README.md +++ b/README.md @@ -73,11 +73,11 @@ To preload a SVG file from a URL into the registry: } ``` To add a SVG from a sting: -``` +```typescript { ... - this.inconReg.addSvg('box', - '' + this.iconReg.addSvg('box', + '' ); } ```