@zohodesk/icons 1.4.0-exp-1 → 1.4.1

package/assets/react/zd-font-react-channels.module.css

@@ -1,7 +1,10 @@
 @font-face {
   font-family:"zdfonts-react-channels";
-  src: url('../fonts/zd-channels.woff2') format('woff2'),
-       url('../fonts/zd-channels.woff') format('woff');
+  src:
+    url('../fonts/zd-channels.woff2') format('woff2'),
+    
+    url('../fonts/zd-channels.woff') format('woff'),
+    url('../fonts/zd-channels.svg#zdfonts') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -11,156 +14,439 @@
 /*$Id$*/
 
 .ff{font-family:"zdfonts-react-channels" !important;}
-/* Define icon codes */
-.icon-android:before { content: "\a3000"; }
-
-.icon-androidd:before { content: "\a3001"; }
-
-.icon-apple:before { content: "\a3002"; }
-
-.icon-ASAP_setup .path1:before { content: "\a3003";  color: rgb(239, 238, 238); }
-.icon-ASAP_setup .path2:before { content: "\a3004"; margin-left: -0.75em; color: rgb(255, 255, 255); }
-.icon-ASAP_setup .path3:before { content: "\a3005"; margin-left: -0.75em; color: rgb(209, 209, 209); }
-.icon-ASAP_setup .path4:before { content: "\a3006"; margin-left: -0.75em; color: rgb(255, 255, 255); }
-
-.icon-ASAP-empty .path1:before { content: "\a3007";  color: rgb(0, 189, 130); }
-.icon-ASAP-empty .path2:before { content: "\a3008"; margin-left: -1.40625em; color: rgb(0, 169, 115); }
-.icon-ASAP-empty .path3:before { content: "\a3009"; margin-left: -1.40625em; color: rgb(246, 246, 246); }
-.icon-ASAP-empty .path4:before { content: "\a300a"; margin-left: -1.40625em; color: rgb(51, 51, 51); opacity: 0.7; }
-.icon-ASAP-empty .path5:before { content: "\a300b"; margin-left: -1.40625em; color: rgb(102, 102, 102); }
-
-.icon-ASAP-setup:before { content: "\a300c"; }
-
-.icon-book3:before { content: "\a300d"; }
-
-.icon-call-out2:before { content: "\a300e"; }
-
-.icon-call-outbound:before { content: "\a300f"; }
-
-.icon-close2:before { content: "\a3010"; }
-
-.icon-collapse1:before { content: "\a3011"; }
-
-.icon-css5:before { content: "\a3012"; }
-
-.icon-denied .path1:before { content: "\a3013";  color: rgb(140, 140, 140); }
-.icon-denied .path2:before { content: "\a3014"; margin-left: -1.079102em; color: rgb(255, 255, 255); }
-.icon-denied .path3:before { content: "\a3015"; margin-left: -1.079102em; color: rgb(239, 239, 239); }
-.icon-denied .path4:before { content: "\a3016"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-.icon-denied .path5:before { content: "\a3017"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-.icon-denied .path6:before { content: "\a3018"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-.icon-denied .path7:before { content: "\a3019"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-.icon-denied .path8:before { content: "\a301a"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-.icon-denied .path9:before { content: "\a301b"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-.icon-denied .path10:before { content: "\a301c"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-.icon-denied .path11:before { content: "\a301d"; margin-left: -1.079102em; color: rgb(140, 140, 140); }
-
-.icon-download:before { content: "\a301e"; }
-
-.icon-drag-left .path1:before { content: "\a301f";  color: rgb(69, 82, 100); }
-.icon-drag-left .path2:before { content: "\a3020"; margin-left: -1em; color: rgb(255, 255, 255); }
-.icon-drag-left .path3:before { content: "\a3021"; margin-left: -1em; color: rgb(235, 236, 238); }
-.icon-drag-left .path4:before { content: "\a3022"; margin-left: -1em; color: rgb(69, 82, 100); }
-.icon-drag-left .path5:before { content: "\a3023"; margin-left: -1em; color: rgb(255, 255, 255); }
-
-.icon-drag-up-down-01 .path1:before { content: "\a3024";  color: rgb(69, 82, 100); }
-.icon-drag-up-down-01 .path2:before { content: "\a3025"; margin-left: -1em; color: rgb(255, 255, 255); }
-.icon-drag-up-down-01 .path3:before { content: "\a3026"; margin-left: -1em; color: rgb(235, 236, 238); }
-.icon-drag-up-down-01 .path4:before { content: "\a3027"; margin-left: -1em; color: rgb(69, 82, 100); }
-.icon-drag-up-down-01 .path5:before { content: "\a3028"; margin-left: -1em; color: rgb(255, 255, 255); }
-
-.icon-draw12:before { content: "\a3029"; }
-
-.icon-edit1:before { content: "\a302a"; }
-
-.icon-font-edit:before { content: "\a302b"; }
-
-.icon-gear:before { content: "\a302c"; }
-
-.icon-html9:before { content: "\a302d"; }
-
-.icon-inapp-embed:before { content: "\a302e"; }
-
-.icon-inapplist:before { content: "\a302f"; }
-
-.icon-key:before { content: "\a3030"; }
-
-.icon-lock-01:before { content: "\a3031"; }
-
-.icon-modownarrow:before { content: "\a3032"; }
-
-.icon-moicons-01:before { content: "\a3033"; }
-
-.icon-moicons-02:before { content: "\a3034"; }
-
-.icon-moicons-03:before { content: "\a3035"; }
-
-.icon-moicons-mute:before { content: "\a3036"; }
-
-.icon-momissed:before { content: "\a3037"; }
-
-.icon-mopause:before { content: "\a3038"; }
-
-.icon-mopause3:before { content: "\a3039"; }
-
-.icon-navicon:before { content: "\a303a"; }
-
-.icon-no-widgets .path1:before { content: "\a303b";  color: rgb(255, 255, 255); }
-.icon-no-widgets .path2:before { content: "\a303c"; margin-left: -1.732422em; color: rgb(239, 239, 239); }
-.icon-no-widgets .path3:before { content: "\a303d"; margin-left: -1.732422em; color: rgb(255, 255, 255); }
-.icon-no-widgets .path4:before { content: "\a303e"; margin-left: -1.732422em; color: rgb(239, 239, 239); }
-.icon-no-widgets .path5:before { content: "\a303f"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path6:before { content: "\a3040"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path7:before { content: "\a3041"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path8:before { content: "\a3042"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path9:before { content: "\a3043"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path10:before { content: "\a3044"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path11:before { content: "\a3045"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path12:before { content: "\a3046"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path13:before { content: "\a3047"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path14:before { content: "\a3048"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path15:before { content: "\a3049"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path16:before { content: "\a304a"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path17:before { content: "\a304b"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path18:before { content: "\a304c"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path19:before { content: "\a304d"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path20:before { content: "\a304e"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path21:before { content: "\a304f"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path22:before { content: "\a3050"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path23:before { content: "\a3051"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path24:before { content: "\a3052"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path25:before { content: "\a3053"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path26:before { content: "\a3054"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path27:before { content: "\a3055"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path28:before { content: "\a3056"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-.icon-no-widgets .path29:before { content: "\a3057"; margin-left: -1.732422em; color: rgb(140, 140, 140); }
-
-.icon-pencil2:before { content: "\a3058"; }
-
-.icon-sort:before { content: "\a3059"; }
-
-.icon-tab-custom:before { content: "\a305a"; }
-
-.icon-telephone98:before { content: "\a305b"; }
-
-.icon-telephony-ONhold:before { content: "\a305c"; }
-
-.icon-unlock-01:before { content: "\a305d"; }
-
-.icon-upload:before { content: "\a305e"; }
-
-.icon-webform:before { content: "\a305f"; }
-
-.icon-callBack:before { content: "\a3060"; }
-
-.icon-instagramOut .path1:before { content: "\a3061";  color: rgb(1, 1, 1); }
-.icon-instagramOut .path2:before { content: "\a3062"; margin-left: -1em; color: rgb(46, 115, 185); }
-
-.icon-instagramIn .path1:before { content: "\a3063";  color: rgb(1, 1, 1); }
-.icon-instagramIn .path2:before { content: "\a3064"; margin-left: -1em; color: rgb(47, 169, 97); }
-
-.icon-instagram:before { content: "\a3065"; }
-
-.icon-xTwiiter .path1:before { content: "\a3066";  color: rgb(51, 51, 51); opacity: 0.2; }
-.icon-xTwiiter .path2:before { content: "\a3067"; margin-left: -1em; color: rgb(35, 31, 32); }
+.icon-android:before {
+  content: "\e300";
+}
+.icon-androidd:before {
+  content: "\e301";
+}
+.icon-apple:before {
+  content: "\e302";
+}
+.icon-ASAP_setup .path1:before {
+  content: "\e303";
+  color: rgb(239, 238, 238);
+}
+.icon-ASAP_setup .path2:before {
+  content: "\e304";
+  margin-left: -0.75em;
+  color: rgb(255, 255, 255);
+}
+.icon-ASAP_setup .path3:before {
+  content: "\e305";
+  margin-left: -0.75em;
+  color: rgb(209, 209, 209);
+}
+.icon-ASAP_setup .path4:before {
+  content: "\e306";
+  margin-left: -0.75em;
+  color: rgb(255, 255, 255);
+}
+.icon-ASAP-empty .path1:before {
+  content: "\e307";
+  color: rgb(0, 189, 130);
+}
+.icon-ASAP-empty .path2:before {
+  content: "\e308";
+  margin-left: -1.40625em;
+  color: rgb(0, 169, 115);
+}
+.icon-ASAP-empty .path3:before {
+  content: "\e309";
+  margin-left: -1.40625em;
+  color: rgb(246, 246, 246);
+}
+.icon-ASAP-empty .path4:before {
+  content: "\e30a";
+  margin-left: -1.40625em;
+  color: rgb(51, 51, 51);
+  opacity: 0.7;
+}
+.icon-ASAP-empty .path5:before {
+  content: "\e30b";
+  margin-left: -1.40625em;
+  color: rgb(102, 102, 102);
+}
+.icon-ASAP-setup:before {
+  content: "\e30c";
+}
+.icon-book3:before {
+  content: "\e30d";
+}
+.icon-call-out2:before {
+  content: "\e30e";
+}
+.icon-call-outbound:before {
+  content: "\e30f";
+}
+.icon-close2:before {
+  content: "\e310";
+}
+.icon-collapse1:before {
+  content: "\e311";
+}
+.icon-css5:before {
+  content: "\e312";
+}
+.icon-denied .path1:before {
+  content: "\e313";
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path2:before {
+  content: "\e314";
+  margin-left: -1.0791015625em;
+  color: rgb(255, 255, 255);
+}
+.icon-denied .path3:before {
+  content: "\e315";
+  margin-left: -1.0791015625em;
+  color: rgb(239, 239, 239);
+}
+.icon-denied .path4:before {
+  content: "\e316";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path5:before {
+  content: "\e317";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path6:before {
+  content: "\e318";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path7:before {
+  content: "\e319";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path8:before {
+  content: "\e31a";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path9:before {
+  content: "\e31b";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path10:before {
+  content: "\e31c";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-denied .path11:before {
+  content: "\e31d";
+  margin-left: -1.0791015625em;
+  color: rgb(140, 140, 140);
+}
+.icon-download:before {
+  content: "\e31e";
+}
+.icon-drag-left .path1:before {
+  content: "\e31f";
+  color: rgb(69, 82, 100);
+}
+.icon-drag-left .path2:before {
+  content: "\e320";
+  margin-left: -1em;
+  color: rgb(255, 255, 255);
+}
+.icon-drag-left .path3:before {
+  content: "\e321";
+  margin-left: -1em;
+  color: rgb(235, 236, 238);
+}
+.icon-drag-left .path4:before {
+  content: "\e322";
+  margin-left: -1em;
+  color: rgb(69, 82, 100);
+}
+.icon-drag-left .path5:before {
+  content: "\e323";
+  margin-left: -1em;
+  color: rgb(255, 255, 255);
+}
+.icon-drag-up-down-01 .path1:before {
+  content: "\e324";
+  color: rgb(69, 82, 100);
+}
+.icon-drag-up-down-01 .path2:before {
+  content: "\e325";
+  margin-left: -1em;
+  color: rgb(255, 255, 255);
+}
+.icon-drag-up-down-01 .path3:before {
+  content: "\e326";
+  margin-left: -1em;
+  color: rgb(235, 236, 238);
+}
+.icon-drag-up-down-01 .path4:before {
+  content: "\e327";
+  margin-left: -1em;
+  color: rgb(69, 82, 100);
+}
+.icon-drag-up-down-01 .path5:before {
+  content: "\e328";
+  margin-left: -1em;
+  color: rgb(255, 255, 255);
+}
+.icon-draw12:before {
+  content: "\e329";
+}
+.icon-edit1:before {
+  content: "\e32a";
+}
+.icon-font-edit:before {
+  content: "\e32b";
+}
+.icon-gear:before {
+  content: "\e32c";
+}
+.icon-html9:before {
+  content: "\e32d";
+}
+.icon-inapp-embed:before {
+  content: "\e32e";
+}
+.icon-inapplist:before {
+  content: "\e32f";
+}
+.icon-key:before {
+  content: "\e330";
+}
+.icon-lock-01:before {
+  content: "\e331";
+}
+.icon-modownarrow:before {
+  content: "\e332";
+}
+.icon-moicons-01:before {
+  content: "\e333";
+}
+.icon-moicons-02:before {
+  content: "\e334";
+}
+.icon-moicons-03:before {
+  content: "\e335";
+}
+.icon-moicons-mute:before {
+  content: "\e336";
+}
+.icon-momissed:before {
+  content: "\e337";
+}
+.icon-mopause:before {
+  content: "\e338";
+}
+.icon-mopause3:before {
+  content: "\e339";
+}
+.icon-navicon:before {
+  content: "\e33a";
+}
+.icon-no-widgets .path1:before {
+  content: "\e33b";
+  color: rgb(255, 255, 255);
+}
+.icon-no-widgets .path2:before {
+  content: "\e33c";
+  margin-left: -1.732421875em;
+  color: rgb(239, 239, 239);
+}
+.icon-no-widgets .path3:before {
+  content: "\e33d";
+  margin-left: -1.732421875em;
+  color: rgb(255, 255, 255);
+}
+.icon-no-widgets .path4:before {
+  content: "\e33e";
+  margin-left: -1.732421875em;
+  color: rgb(239, 239, 239);
+}
+.icon-no-widgets .path5:before {
+  content: "\e33f";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path6:before {
+  content: "\e340";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path7:before {
+  content: "\e341";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path8:before {
+  content: "\e342";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path9:before {
+  content: "\e343";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path10:before {
+  content: "\e344";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path11:before {
+  content: "\e345";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path12:before {
+  content: "\e346";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path13:before {
+  content: "\e347";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path14:before {
+  content: "\e348";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path15:before {
+  content: "\e349";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path16:before {
+  content: "\e34a";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path17:before {
+  content: "\e34b";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path18:before {
+  content: "\e34c";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path19:before {
+  content: "\e34d";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path20:before {
+  content: "\e34e";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path21:before {
+  content: "\e34f";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path22:before {
+  content: "\e350";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path23:before {
+  content: "\e351";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path24:before {
+  content: "\e352";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path25:before {
+  content: "\e353";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path26:before {
+  content: "\e354";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path27:before {
+  content: "\e355";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path28:before {
+  content: "\e356";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-no-widgets .path29:before {
+  content: "\e357";
+  margin-left: -1.732421875em;
+  color: rgb(140, 140, 140);
+}
+.icon-pencil2:before {
+  content: "\e358";
+}
+.icon-sort:before {
+  content: "\e359";
+}
+.icon-tab-custom:before {
+  content: "\e35a";
+}
+.icon-telephone98:before {
+  content: "\e35b";
+}
+.icon-telephony-ONhold:before {
+  content: "\e35c";
+}
+.icon-unlock-01:before {
+  content: "\e35d";
+}
+.icon-upload:before {
+  content: "\e35e";
+}
+.icon-webform:before {
+  content: "\e35f";
+}
+.icon-callBack:before {
+  content: "\e360";
+}
+.icon-instagramOut .path1:before {
+  content: "\e361";
+  color: rgb(1, 1, 1);
+}
+.icon-instagramOut .path2:before {
+  content: "\e362";
+  margin-left: -1em;
+  color: rgb(46, 115, 185);
+}
+.icon-instagramIn .path1:before {
+  content: "\e363";
+  color: rgb(1, 1, 1);
+}
+.icon-instagramIn .path2:before {
+  content: "\e364";
+  margin-left: -1em;
+  color: rgb(47, 169, 97);
+}
+.icon-instagram:before {
+  content: "\e365";
+}
+.icon-xTwiiter .path1:before {
+  content: "\e366";
+  color: rgb(51, 51, 51);
+  opacity: 0.2;
+}
+.icon-xTwiiter .path2:before {
+  content: "\e367";
+  margin-left: -1em;
+  color: rgb(35, 31, 32);
+}
 }