From 7fb24c90260f7aa89b45ad1fa4a27720eec92c3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20B=C3=A1rta?= <email@ondrejbarta.xyz>
Date: Fri, 5 Oct 2018 12:09:52 +0200
Subject: [PATCH] Update icon set according to documentation

---
 package.json                 |  4 +--
 src/templates/index.template | 43 +++++++++++++++++---------------
 src/utils/Icon.ts            | 48 ++++++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 22 deletions(-)
 create mode 100644 src/utils/Icon.ts

diff --git a/package.json b/package.json
index c475d6c..0581dce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "xyz-icon-set",
-	"version": "0.23.0",
+	"version": "0.24.0",
 	"description": "",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -9,7 +9,7 @@
 		"build": "npm run clean && npm run build:source && node ./dist/build.js && npm run build:output",
 		"build:output": "tsc dist/index.ts -d --outDir dist/",
 		"build:source": "tsc src/build.ts -d --outDir dist/ && npm run build:utils",
-		"build:utils": "tsc src/utils/getIcon.ts -d --outDir dist/utils/",
+		"build:utils": "tsc src/utils/Icon.ts -d --outDir dist/utils/",
 		"lint": "eslint src tests",
 		"lint:fix": "npm run lint -- --fix",
 		"test": "mocha -r ts-node/register src/**/__test__/**/*.ts",
diff --git a/src/templates/index.template b/src/templates/index.template
index 7a87d41..6a85795 100644
--- a/src/templates/index.template
+++ b/src/templates/index.template
@@ -3,22 +3,11 @@
 import {{name}}_{{theme}} from './icons/{{{category}}}.{{{theme}}}.{{{name}}}';
 {{/each}}
 
+import { Icon } from './utils/Icon';
 
-export type IconTheme = 'regular' | 'thin' | 'filled' | 'real';
-
-export interface UnthemedIcon {
-	regular: Icon;
-	thin: Icon;
-	filled?: Icon;
-	real?: Icon;
-}
-
-export interface Icon {
-	source: string;
-	category: string;
-	theme: IconTheme;
-	name: string;
-}
+/*
+ *  Meta Data - Types
+ */
 
 export type IconCategory ={{#iconCategories}}
 	| '{{this}}'{{/iconCategories}};
@@ -27,8 +16,12 @@ export type IconName ={{#iconNames}}
 	| '{{this}}'{{/iconNames}};
 
 export type IconComponentName ={{#iconComponentNames}}
-	| '{{this}}'{{/iconComponentNames}}
+	| '{{this}}'{{/iconComponentNames}};
+
 
+/*
+ *  Meta Data - Exports
+ */
 
 export const iconCategories: IconCategory[] = [{{#iconCategories}}
 	'{{this}}',{{/iconCategories}}
@@ -42,15 +35,25 @@ export const iconComponentNames: IconComponentName[] = [{{#iconComponentNames}}
 	'{{this}}',{{/iconComponentNames}}
 ];
 
+
 export interface IconComponents { {{#iconComponentNames}}
 	{{this}}: any;{{/iconComponentNames}}
 }
 
+/*
+ *  Icon Classes Export
+ */
+
+
 {{#each icons}}
-export const {{@key}}: UnthemedIcon = {
-	regular: {{#regular}}{{name}}_{{theme}}{{/regular}} as Icon,
-	thin: {{#thin}}{{name}}_{{theme}}{{/thin}} as Icon,
-};
+export class {{@key}} extends Icon {
+	name = '{{@key}}';
+	category = '{{#regular}}{{category}}{{/regular}}';
+	source = {
+		regular: {{#regular}}{{name}}_{{theme}}{{/regular}}.source,
+		thin: {{#thin}}{{name}}_{{theme}}{{/thin}}.source,
+	}
+}
 {{/each}}
 
 const XYZIconSet = {
diff --git a/src/utils/Icon.ts b/src/utils/Icon.ts
new file mode 100644
index 0000000..1055225
--- /dev/null
+++ b/src/utils/Icon.ts
@@ -0,0 +1,48 @@
+export type IconTheme = 'regular' | 'thin';
+
+export interface GetIconInput {
+	source: string;
+	category: string;
+	theme: IconTheme;
+	name: string;
+}
+
+export interface IconOptions {
+	fillOpacity?: number;
+}
+
+export interface IconContstructorOptions {
+	theme?: IconTheme;
+}
+
+export class Icon {
+	name: string;
+	category: string;
+	theme: IconTheme;
+	source: {
+		[key: string]: string;
+	};
+
+	constructor({ theme }: IconContstructorOptions = {}) {
+		this.theme = theme || 'regular';
+	}
+
+	toString({ fillOpacity = 0 }: IconOptions = {}): string {
+		return this.source[this.theme].replace(
+			/fill\-opacity\=\"0\.1\"/g,
+			`fill-opacity="${fillOpacity}"`,
+		);
+	}
+
+	toDocumentFragment({ fillOpacity }: IconOptions = {}): DocumentFragment {
+		if (!document) {
+			throw new Error(
+				'Document object is not in your global scope. This method can be executed in browser only.',
+			);
+		}
+
+		return document
+			.createRange()
+			.createContextualFragment(this.source[this.theme]);
+	}
+}