Update icon set according to documentation

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",

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 = {

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]);
+	}
+}