mohamedali-s-4725 · November 7, 2023 07:43 · Nov 7, 2023 · Apr 24, 2023 · Sep 29, 2022 · Sep 29, 2022
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -2,12 +2,11 @@ import Controller from '@ember/controller';
 import { set } from '@ember/object';
 
 export default Controller.extend({
-  
+
 	init(){
-    this._super(...arguments);
-alert();
-		set(this, 'iconList', Object.keys(this.svg_icons));
-  },
+	    this._super(...arguments);
+	    set(this, 'iconList', Object.keys(this.svg_icons));
+  	},
 
 	iconList: '',
 

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -5,7 +5,7 @@ export default Controller.extend({
 
 	init(){
     this._super(...arguments);
-
+alert();
 		set(this, 'iconList', Object.keys(this.svg_icons));
   },
 

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -5,21 +5,18 @@
 
 <style>
   .zwd-icon-18 {
-    width: 18px!important;
-    height: 18px!important;
+    width: 20px!important;
+    height: 20px!important;
     flex: 0 0 14px!important;
+    margin-top: 20px!important;
 	}
-  
-  .zwd-pt--3 {
-    position: relative;
-    top: -3px!important;
-}
+ 
 </style>
 
 {{#each iconList as |icon index|}}
 
 <SvgIcon @name={{icon}} @svgicons={{svg_icons}} @class="zwd-icon-18"/>
-
+&nbsp;&nbsp;&nbsp;
 {{/each}}
 
 {{outlet}}

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -7,7 +7,6 @@ export default Controller.extend({
     this._super(...arguments);
 
 		set(this, 'iconList', Object.keys(this.svg_icons));
-    console.log(this.iconList);
   },
 
 	iconList: '',

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -1,5 +1,6 @@
 <h1>WorkDrive SVG Icons</h1>
 <br>
+<hr>
 <br>
 
 <style>
@@ -16,7 +17,9 @@
 </style>
 
 {{#each iconList as |icon index|}}
+
 <SvgIcon @name={{icon}} @svgicons={{svg_icons}} @class="zwd-icon-18"/>
+
 {{/each}}
 
 {{outlet}}

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -4,8 +4,8 @@
 
 <style>
   .zwd-icon-18 {
-    width: 14px!important;
-    height: 14px!important;
+    width: 18px!important;
+    height: 18px!important;
     flex: 0 0 14px!important;
 	}
   
@@ -15,8 +15,8 @@
 }
 </style>
 
-{{#each iconList as |icon|}}
-	<SvgIcon @name={{icon}} @svgicons={{svg_icons}} @class="zwd-icon-18 left floa"/>
+{{#each iconList as |icon index|}}
+<SvgIcon @name={{icon}} @svgicons={{svg_icons}} @class="zwd-icon-18"/>
 {{/each}}
 
 {{outlet}}

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -2,8 +2,21 @@
 <br>
 <br>
 
+<style>
+  .zwd-icon-18 {
+    width: 14px!important;
+    height: 14px!important;
+    flex: 0 0 14px!important;
+	}
+  
+  .zwd-pt--3 {
+    position: relative;
+    top: -3px!important;
+}
+</style>
+
 {{#each iconList as |icon|}}
-	<SvgIcon @name={{icon}} @svgicons={{svg_icons}}/>
+	<SvgIcon @name={{icon}} @svgicons={{svg_icons}} @class="zwd-icon-18 left floa"/>
 {{/each}}
 
 {{outlet}}

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -3,7 +3,7 @@
 <br>
 
 {{#each iconList as |icon|}}
-	<SvgIcon @name={{icon}} @svgicons={{svg_icons}} @class="zdicon-18 left floated pt--1"/>
+	<SvgIcon @name={{icon}} @svgicons={{svg_icons}}/>
 {{/each}}
 
 {{outlet}}

diff --git a/components.svg-icon\.js b/components.svg-icon\.js
@@ -23,6 +23,7 @@ export default Component.extend({
 	  this._super(...arguments);
 	  let self = this,
 	  iconKey = 'svgicons.' + self.name; // No I18N
+    console.log('svgicons.' , self.name);
 	  set(self, 'svgJson', get(self, iconKey));
 	  if (self.svgJson && self.svgJson.viewBox) {
 			set(self, 'viewBox', self.svgJson.viewBox);

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -3,7 +3,7 @@
 <br>
 
 {{#each iconList as |icon|}}
-	<SvgIcon @name={{icon.icon_name}} @svgicons={{svg_icons}} @class="zdicon-18 left floated pt--1"/>
+	<SvgIcon @name={{icon}} @svgicons={{svg_icons}} @class="zdicon-18 left floated pt--1"/>
 {{/each}}
 
 {{outlet}}

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -3,7 +3,7 @@
 <br>
 
 {{#each iconList as |icon|}}
-	<SvgIcon @name={{icon.icon_name}} @class="zdicon-18 left floated pt--1"/>
+	<SvgIcon @name={{icon.icon_name}} @svgicons={{svg_icons}} @class="zdicon-18 left floated pt--1"/>
 {{/each}}
 
 {{outlet}}

diff --git a/components.svg-icon\.js b/components.svg-icon\.js
@@ -5,6 +5,8 @@ import { get, set } from '@ember/object';
 export default Component.extend({
   layout,
 
+	svgicons : '',
+
   tagName: 'svg', // No I18N
 
   name: '',	// No I18N

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -1,11 +1,13 @@
 import Controller from '@ember/controller';
+import { set } from '@ember/object';
 
 export default Controller.extend({
 
 	init(){
     this._super(...arguments);
 
-		console.log(svg_icons);
+		set(this, 'iconList', Object.keys(this.svg_icons));
+    console.log(this.iconList);
   },
 
 	iconList: '',

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -2,7 +2,14 @@ import Controller from '@ember/controller';
 
 export default Controller.extend({
 
+	init(){
+    this._super(...arguments);
+
+		console.log(svg_icons);
+  },
+
 	iconList: '',
+
 svg_icons : {
 	wd_labels: {
 		path: [

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -2319,10 +2319,10 @@ wd_desktop: {
 	wd_theme: {
 		rect: [
 					{
-						fill='#f9f9f9', // No I18N
-						 width='150',
-						 height='100',
-						 rx='8'
+						fill:'#f9f9f9', // No I18N
+						 width:'150',
+						 height:'100',
+						 rx:'8'
 					}
 			   ],
 		path: [
@@ -2895,7 +2895,7 @@ wd_desktop: {
 				d: 'M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M11.5,15.2c-0.3,0.1-0.6-0.1-0.6-0.5v-1c0-0.2,0.1-0.4,0.3-0.4c1.4-0.5,2.5-1.9,2.5-3.4c0-2-1.6-3.6-3.6-3.6S6.4,8,6.4,10c0,0.6,0.2,1.3,0.5,1.8c0,0.1,0.2,0.1,0.3,0.1c0.1,0,0.1-0.1,0.1-0.2v-0.4c0-0.3,0.2-0.5,0.5-0.5h0.9c0.3,0,0.5,0.2,0.5,0.5V15c0,0.3-0.2,0.5-0.5,0.5H5c-0.3,0-0.5-0.2-0.5-0.5v-0.9c0-0.3,0.2-0.5,0.5-0.5h0.5c0.1,0,0.2-0.1,0.2-0.2c0,0,0-0.1,0-0.1c-0.7-0.9-1.1-2-1.1-3.3C4.5,7,7,4.5,10,4.5S15.5,7,15.5,10C15.5,12.5,13.8,14.6,11.5,15.2z' // No I18N
 			}
 		],
-		viewBox='0 0 20 20'
+		viewBox:'0 0 20 20'
 	}
 
 }

diff --git a/controllers.application\.js b/controllers.application\.js
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -1,5 +1,7 @@
 import Controller from '@ember/controller';
 
-export default class ApplicationController extends Controller {
-  appName = 'Ember Twiddle';
-}
+export default Controller.extend({
+
+	iconList : 
+
+});
diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -2,7 +2,7 @@
 <br>
 <br>
 
-{{#each icon_list as |icon|}}
+{{#each iconList as |icon|}}
 	<SvgIcon @name={{icon.icon_name}} @class="zdicon-18 left floated pt--1"/>
 {{/each}}
 

diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -1,6 +1,11 @@
-<h1>Welcome to {{this.appName}}</h1>
+<h1>WorkDrive SVG Icons</h1>
 <br>
 <br>
+
+{{#each icon_list as |icon|}}
+	<SvgIcon @name={{icon.icon_name}} @class="zdicon-18 left floated pt--1"/>
+{{/each}}
+
 {{outlet}}
 <br>
 <br>
diff --git a/templates.components.svg-icon\.hbs b/templates.components.svg-icon\.hbs
@@ -1 +1,23 @@
-{{yield}}
+{{#each svgJson.rect as |rectObj|}}
+	<rect fill="{{if rectObj.fill rectObj.fill ''}}" opacity="{{if rectObj.opacity rectObj.opacity ''}}" width="{{if rectObj.width rectObj.width ''}}" height="{{if rectObj.height rectObj.height ''}}" stroke="{{if rectObj.stroke rectObj.stroke ''}}" x="{{if rectObj.x rectObj.x ''}}" y="{{if rectObj.y rectObj.y ''}}" rx="{{if rectObj.rx rectObj.rx ''}}" fill-rule="{{if rectObj.fill-rule rectObj.fill-rule ''}}"></rect>
+{{/each}}
+
+{{#each svgJson.line as |lineObj|}} 
+	<line x1="{{if lineObj.x1 lineObj.x1 ''}}" y1="{{if lineObj.y1 lineObj.y1 ''}}" x2="{{if lineObj.x2 lineObj.x2 ''}}" y2="{{if lineObj.y2 lineObj.y2 ''}}" stroke="{{if lineObj.stroke lineObj.stroke ''}}" stroke-linecap="{{if lineObj.stroke-linecap lineObj.stroke-linecap ''}}" stroke-linejoin="{{if lineObj.stroke-linejoin lineObj.stroke-linejoin ''}}"></line>	{{!-- No I18N --}}
+{{/each}}
+
+{{#each svgJson.path as |pathObj|}}
+
+	<path d="{{pathObj.d}}" fill="{{if pathObj.fill pathObj.fill ''}}" opacity="{{if pathObj.opacity pathObj.opacity ''}}" stroke="{{if pathObj.stroke pathObj.stroke ''}}" transform="{{if pathObj.transform pathObj.transform ''}}" fill-rule="{{if pathObj.fill-rule pathObj.fill-rule ''}}"></path>
+
+{{/each}}
+
+{{#each svgJson.ellipse as |ellipseObj|}}
+
+	<ellipse cx="{{if ellipseObj.cx ellipseObj.cx ''}}" cy="{{if ellipseObj.cy ellipseObj.cy ''}}" rx="{{if ellipseObj.rx ellipseObj.rx ''}}" ry="{{if ellipseObj.ry ellipseObj.ry ''}}" stroke="{{if ellipseObj.stroke ellipseObj.stroke ''}}" fill-rule="{{if ellipseObj.fill-rule ellipseObj.fill-rule ''}}" opacity="{{if ellipseObj.opacity ellipseObj.opacity ''}}"></ellipse>
+
+{{/each}}
+
+{{#each svgJson.polygon as |polygonObj|}} 
+	<polygon points="{{if polygonObj.points polygonObj.points ''}}" transform="{{if polygonObj.transform polygonObj.transform ''}}" fill="{{if polygonObj.fill polygonObj.fill}}" fill-rule="{{if polygonObj.fill-rule polygonObj.fill-rule}}"></polygon>
+{{/each}}
diff --git a/components.svg-icon\.js b/components.svg-icon\.js
@@ -0,0 +1,30 @@
+import Component from '@ember/component';
+import layout from '../templates/components/svg-icon';
+import { get, set } from '@ember/object';
+
+export default Component.extend({
+  layout,
+
+  tagName: 'svg', // No I18N
+
+  name: '',	// No I18N
+
+  attributeBindings: ['viewBox', 'DataSvgName'], // No I18N
+
+  DataSvgName: '',
+
+  viewBox: '0 0 20 20', // No I18N
+
+  svgJson: '', // No I18N
+
+  didReceiveAttrs() {
+	  this._super(...arguments);
+	  let self = this,
+	  iconKey = 'svgicons.' + self.name; // No I18N
+	  set(self, 'svgJson', get(self, iconKey));
+	  if (self.svgJson && self.svgJson.viewBox) {
+			set(self, 'viewBox', self.svgJson.viewBox);
+	  }
+	  set(self, 'DataSvgName', self.name);
+  }
+});
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -0,0 +1,5 @@
+import Controller from '@ember/controller';
+
+export default class ApplicationController extends Controller {
+  appName = 'Ember Twiddle';
+}
diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -0,0 +1,6 @@
+<h1>Welcome to {{this.appName}}</h1>
+<br>
+<br>
+{{outlet}}
+<br>
+<br>
diff --git a/templates.components.svg-icon\.hbs b/templates.components.svg-icon\.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/twiddle\.json b/twiddle\.json
@@ -0,0 +1,22 @@
+{
+  "version": "0.17.1",
+  "EmberENV": {
+    "FEATURES": {},
+    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
+    "_APPLICATION_TEMPLATE_WRAPPER": true,
+    "_JQUERY_INTEGRATION": true
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
+    "ember": "3.18.1",
+    "ember-template-compiler": "3.18.1",
+    "ember-testing": "3.18.1"
+  },
+  "addons": {
+    "@glimmer/component": "1.0.0"
+  }
+}
No results found