From fb139d1669b4eb7e618879b5ba7a6ff09ce8cef2 Mon Sep 17 00:00:00 2001 From: David Czeck Date: Tue, 15 Mar 2016 23:06:39 -0700 Subject: [PATCH] Initial --- .gitignore | 5 ++++ LICENSE | 21 +++++++++++++++ README.md | 46 ++++++++++++++++++++++++++++++++ app/demo-app.component.ts | 24 +++++++++++++++++ app/main.ts | 8 ++++++ app/svg-icon.component.ts | 32 ++++++++++++++++++++++ demo/index.html | 56 +++++++++++++++++++++++++++++++++++++++ images/README.md | 4 +++ images/eye.svg | 2 ++ index.html | 44 ++++++++++++++++++++++++++++++ package.json | 35 ++++++++++++++++++++++++ tsconfig.json | 19 +++++++++++++ typings.json | 6 +++++ 13 files changed, 302 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 app/demo-app.component.ts create mode 100644 app/main.ts create mode 100644 app/svg-icon.component.ts create mode 100644 demo/index.html create mode 100644 images/README.md create mode 100644 images/eye.svg create mode 100644 index.html create mode 100644 package.json create mode 100644 tsconfig.json create mode 100644 typings.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ea8e218 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +app/*.js +app/*.map +node_modules +typings + diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..714cae3 --- /dev/null +++ b/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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..0ad655e --- /dev/null +++ b/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) diff --git a/app/demo-app.component.ts b/app/demo-app.component.ts new file mode 100644 index 0000000..04bafe0 --- /dev/null +++ b/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: ` +
+
+ +
+
+ +
+
+ +
+
+ ` +}) + +export class DemoAppComponent { +} + diff --git a/app/main.ts b/app/main.ts new file mode 100644 index 0000000..c381cee --- /dev/null +++ b/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 ]); diff --git a/app/svg-icon.component.ts b/app/svg-icon.component.ts new file mode 100644 index 0000000..dea80eb --- /dev/null +++ b/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: `
` +}) + + +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) } + ); + } + +} diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..691a413 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,56 @@ + + + + SVG Icon Demo + + + + + + + + + + + + + + + + + + + + + + + + + + Loading... + + + + diff --git a/images/README.md b/images/README.md new file mode 100644 index 0000000..ee05b0d --- /dev/null +++ b/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. diff --git a/images/eye.svg b/images/eye.svg new file mode 100644 index 0000000..34bf77e --- /dev/null +++ b/images/eye.svg @@ -0,0 +1,2 @@ + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a66c07 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + SVG Icon Demo + + + + + + + + + + + + + + + + + + + + + + + Loading... + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f5be143 --- /dev/null +++ b/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" + } +} + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..0520c3e --- /dev/null +++ b/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" + ] +} + diff --git a/typings.json b/typings.json new file mode 100644 index 0000000..c481bc1 --- /dev/null +++ b/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" + } +}