@zohodesk/icons 1.4.0-exp-1 → 1.4.1

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

@@ -1,7 +1,10 @@
 @font-face {
   font-family:"zdfonts-react-gettingstarted";
-  src: url('../fonts/zd-gettingstarted.woff2') format('woff2'),
-       url('../fonts/zd-gettingstarted.woff') format('woff');
+  src:
+    url('../fonts/zd-gettingstarted.woff2') format('woff2'),
+    
+    url('../fonts/zd-gettingstarted.woff') format('woff'),
+    url('../fonts/zd-gettingstarted.svg#zdfonts') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -11,121 +14,321 @@
 /*$Id$*/
 
 .ff{font-family:"zdfonts-react-gettingstarted" !important;}
-/* Define icon codes */
-.icon-arrow-left:before { content: "\b1000"; }
-
-.icon-camera:before { content: "\b1001"; }
-
-.icon-channels-4:before { content: "\b1002"; }
-
-.icon-check:before { content: "\b1003"; }
-
-.icon-close-e:before { content: "\b1004"; }
-
-.icon-CRM_new:before { content: "\b1005"; color: rgb(34, 109, 180); }
-
-.icon-delete-2:before { content: "\b1006"; }
-
-.icon-delete2:before { content: "\b1007"; }
-
-.icon-exclamation-thincircle:before { content: "\b1008"; }
-
-.icon-fb2:before { content: "\b1009"; }
-
-.icon-Get_Start_rocket .path1:before { content: "\b100a";  color: rgb(166, 166, 166); }
-.icon-Get_Start_rocket .path2:before { content: "\b100b"; margin-left: -0.53125em; color: rgb(233, 233, 233); }
-
-.icon-Getsrart-gear-bg .path1:before { content: "\b100c";  color: rgb(161, 161, 161); opacity: 0.5; }
-.icon-Getsrart-gear-bg .path2:before { content: "\b100d"; margin-left: -8.65625em; color: rgb(164, 164, 164); opacity: 0.5; }
-.icon-Getsrart-gear-bg .path3:before { content: "\b100e"; margin-left: -8.65625em; color: rgb(166, 166, 166); opacity: 0.5; }
-.icon-Getsrart-gear-bg .path4:before { content: "\b100f"; margin-left: -8.65625em; color: rgb(163, 163, 163); opacity: 0.5; }
-.icon-Getsrart-gear-bg .path5:before { content: "\b1010"; margin-left: -8.65625em; color: rgb(162, 162, 162); opacity: 0.5; }
-.icon-Getsrart-gear-bg .path6:before { content: "\b1011"; margin-left: -8.65625em; color: rgb(165, 165, 165); opacity: 0.5; }
-
-.icon-GetStartBG .path1:before { content: "\b1012";  color: rgb(245, 245, 245); }
-.icon-GetStartBG .path2:before { content: "\b1013"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path3:before { content: "\b1014"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path4:before { content: "\b1015"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path5:before { content: "\b1016"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path6:before { content: "\b1017"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path7:before { content: "\b1018"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path8:before { content: "\b1019"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path9:before { content: "\b101a"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path10:before { content: "\b101b"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path11:before { content: "\b101c"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path12:before { content: "\b101d"; margin-left: -7.625em; color: rgb(245, 245, 245); }
-.icon-GetStartBG .path13:before { content: "\b101e"; margin-left: -7.625em; color: rgb(234, 234, 234); }
-.icon-GetStartBG .path14:before { content: "\b101f"; margin-left: -7.625em; color: rgb(234, 234, 234); }
-.icon-GetStartBG .path15:before { content: "\b1020"; margin-left: -7.625em; color: rgb(234, 234, 234); }
-.icon-GetStartBG .path16:before { content: "\b1021"; margin-left: -7.625em; color: rgb(234, 234, 234); }
-.icon-GetStartBG .path17:before { content: "\b1022"; margin-left: -7.625em; color: rgb(234, 234, 234); }
-.icon-GetStartBG .path18:before { content: "\b1023"; margin-left: -7.625em; color: rgb(234, 234, 234); }
-
-.icon-GetStartstar:before { content: "\b1024"; color: rgb(166, 166, 166); }
-
-.icon-greenemail:before { content: "\b1025"; }
-
-.icon-ic-social_arrow-line:before { content: "\b1026"; }
-
-.icon-ic-social_fb-2:before { content: "\b1027"; }
-
-.icon-ic-social_twitter-2:before { content: "\b1028"; }
-
-.icon-info31:before { content: "\b1029"; }
-
-.icon-invite-agents:before { content: "\b102a"; }
-
-.icon-livechat:before { content: "\b102b"; }
-
-.icon-open:before { content: "\b102c"; }
-
-.icon-pen2:before { content: "\b102d"; }
-
-.icon-Quicksetup .path1:before { content: "\b102e";  color: rgb(250, 250, 250); opacity: 0.35; }
-.icon-Quicksetup .path2:before { content: "\b102f"; margin-left: -1em; color: rgb(166, 166, 166); }
-.icon-Quicksetup .path3:before { content: "\b1030"; margin-left: -1em; color: rgb(166, 166, 166); }
-.icon-Quicksetup .path4:before { content: "\b1031"; margin-left: -1em; color: rgb(166, 166, 166); }
-.icon-Quicksetup .path5:before { content: "\b1032"; margin-left: -1em; color: rgb(255, 255, 255); }
-.icon-Quicksetup .path6:before { content: "\b1033"; margin-left: -1em; color: rgb(166, 166, 166); }
-.icon-Quicksetup .path7:before { content: "\b1034"; margin-left: -1em; color: rgb(166, 166, 166); }
-.icon-Quicksetup .path8:before { content: "\b1035"; margin-left: -1em; color: rgb(166, 166, 166); }
-
-.icon-Quicksetupgear:before { content: "\b1036"; }
-
-.icon-Quicksetupgear1:before { content: "\b1037"; }
-
-.icon-rebrand_new:before { content: "\b1038"; }
-
-.icon-Rebrand:before { content: "\b1039"; }
-
-.icon-rebrand2:before { content: "\b103a"; }
-
-.icon-SkyDeskSupport .path1:before { content: "\b103b";  color: rgb(40, 149, 213); }
-.icon-SkyDeskSupport .path2:before { content: "\b103c"; margin-left: -3.108398em; color: rgb(115, 115, 115); }
-
-.icon-spam:before { content: "\b103d"; }
-
-.icon-telephone:before { content: "\b103e"; }
-
-.icon-TelephonyDashboard .path1:before { content: "\b103f";  color: rgb(204, 204, 204); opacity: 0.1; }
-.icon-TelephonyDashboard .path2:before { content: "\b1040"; margin-left: -1em; color: rgb(216, 216, 216); opacity: 0.1; }
-.icon-TelephonyDashboard .path3:before { content: "\b1041"; margin-left: -1em; color: rgb(81, 81, 81); opacity: 0.1; }
-.icon-TelephonyDashboard .path4:before { content: "\b1042"; margin-left: -1em; color: rgb(234, 234, 234); }
-.icon-TelephonyDashboard .path5:before { content: "\b1043"; margin-left: -1em; color: rgb(242, 242, 242); }
-
-.icon-ticknew:before { content: "\b1044"; }
-
-.icon-TPCRM05-01:before { content: "\b1045"; }
-
-.icon-twit:before { content: "\b1046"; }
-
-.icon-zd_live_chat:before { content: "\b1047"; }
-
-.icon-zd-self-service:before { content: "\b1048"; }
-
-.icon-zd-social:before { content: "\b1049"; }
-
-.icon-Zoho-Desk:before { content: "\b104a"; }
-
-.icon-Bigin_Logo:before { content: "\b104b"; color: rgb(4, 153, 73); opacity: 0.9; }
+.icon-arrow-left:before {
+  content: "\f900";
+}
+.icon-camera:before {
+  content: "\f901";
+}
+.icon-channels-4:before {
+  content: "\f902";
+}
+.icon-check:before {
+  content: "\f903";
+}
+.icon-close-e:before {
+  content: "\f904";
+}
+.icon-CRM_new:before {
+  content: "\f905";
+  color: #226db4;
+}
+.icon-delete-2:before {
+  content: "\f906";
+}
+.icon-delete2:before {
+  content: "\f907";
+}
+.icon-exclamation-thincircle:before {
+  content: "\f908";
+}
+.icon-fb2:before {
+  content: "\f909";
+}
+.icon-Get_Start_rocket .path1:before {
+  content: "\f90a";
+  color: rgb(166, 166, 166);
+}
+.icon-Get_Start_rocket .path2:before {
+  content: "\f90b";
+  margin-left: -0.53125em;
+  color: rgb(233, 233, 233);
+}
+.icon-Getsrart-gear-bg .path1:before {
+  content: "\f90c";
+  color: rgb(161, 161, 161);
+  opacity: 0.5;
+}
+.icon-Getsrart-gear-bg .path2:before {
+  content: "\f90d";
+  margin-left: -8.65625em;
+  color: rgb(164, 164, 164);
+  opacity: 0.5;
+}
+.icon-Getsrart-gear-bg .path3:before {
+  content: "\f90e";
+  margin-left: -8.65625em;
+  color: rgb(166, 166, 166);
+  opacity: 0.5;
+}
+.icon-Getsrart-gear-bg .path4:before {
+  content: "\f90f";
+  margin-left: -8.65625em;
+  color: rgb(163, 163, 163);
+  opacity: 0.5;
+}
+.icon-Getsrart-gear-bg .path5:before {
+  content: "\f910";
+  margin-left: -8.65625em;
+  color: rgb(162, 162, 162);
+  opacity: 0.5;
+}
+.icon-Getsrart-gear-bg .path6:before {
+  content: "\f911";
+  margin-left: -8.65625em;
+  color: rgb(165, 165, 165);
+  opacity: 0.5;
+}
+.icon-GetStartBG .path1:before {
+  content: "\f912";
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path2:before {
+  content: "\f913";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path3:before {
+  content: "\f914";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path4:before {
+  content: "\f915";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path5:before {
+  content: "\f916";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path6:before {
+  content: "\f917";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path7:before {
+  content: "\f918";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path8:before {
+  content: "\f919";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path9:before {
+  content: "\f91a";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path10:before {
+  content: "\f91b";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path11:before {
+  content: "\f91c";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path12:before {
+  content: "\f91d";
+  margin-left: -7.625em;
+  color: rgb(245, 245, 245);
+}
+.icon-GetStartBG .path13:before {
+  content: "\f91e";
+  margin-left: -7.625em;
+  color: rgb(234, 234, 234);
+}
+.icon-GetStartBG .path14:before {
+  content: "\f91f";
+  margin-left: -7.625em;
+  color: rgb(234, 234, 234);
+}
+.icon-GetStartBG .path15:before {
+  content: "\f920";
+  margin-left: -7.625em;
+  color: rgb(234, 234, 234);
+}
+.icon-GetStartBG .path16:before {
+  content: "\f921";
+  margin-left: -7.625em;
+  color: rgb(234, 234, 234);
+}
+.icon-GetStartBG .path17:before {
+  content: "\f922";
+  margin-left: -7.625em;
+  color: rgb(234, 234, 234);
+}
+.icon-GetStartBG .path18:before {
+  content: "\f923";
+  margin-left: -7.625em;
+  color: rgb(234, 234, 234);
+}
+.icon-GetStartstar:before {
+  content: "\f924";
+  color: #a6a6a6;
+}
+.icon-greenemail:before {
+  content: "\f925";
+}
+.icon-ic-social_arrow-line:before {
+  content: "\f926";
+}
+.icon-ic-social_fb-2:before {
+  content: "\f927";
+}
+.icon-ic-social_twitter-2:before {
+  content: "\f928";
+}
+.icon-info31:before {
+  content: "\f929";
+}
+.icon-invite-agents:before {
+  content: "\f92a";
+}
+.icon-livechat:before {
+  content: "\f92b";
+}
+.icon-open:before {
+  content: "\f92c";
+}
+.icon-pen2:before {
+  content: "\f92d";
+}
+.icon-Quicksetup .path1:before {
+  content: "\f92e";
+  color: rgb(250, 250, 250);
+  opacity: 0.35;
+}
+.icon-Quicksetup .path2:before {
+  content: "\f92f";
+  margin-left: -1em;
+  color: rgb(166, 166, 166);
+}
+.icon-Quicksetup .path3:before {
+  content: "\f930";
+  margin-left: -1em;
+  color: rgb(166, 166, 166);
+}
+.icon-Quicksetup .path4:before {
+  content: "\f931";
+  margin-left: -1em;
+  color: rgb(166, 166, 166);
+}
+.icon-Quicksetup .path5:before {
+  content: "\f932";
+  margin-left: -1em;
+  color: rgb(255, 255, 255);
+}
+.icon-Quicksetup .path6:before {
+  content: "\f933";
+  margin-left: -1em;
+  color: rgb(166, 166, 166);
+}
+.icon-Quicksetup .path7:before {
+  content: "\f934";
+  margin-left: -1em;
+  color: rgb(166, 166, 166);
+}
+.icon-Quicksetup .path8:before {
+  content: "\f935";
+  margin-left: -1em;
+  color: rgb(166, 166, 166);
+}
+.icon-Quicksetupgear:before {
+  content: "\f936";
+}
+.icon-Quicksetupgear1:before {
+  content: "\f937";
+}
+.icon-rebrand_new:before {
+  content: "\f938";
+}
+.icon-Rebrand:before {
+  content: "\f939";
+}
+.icon-rebrand2:before {
+  content: "\f93a";
+}
+.icon-SkyDeskSupport .path1:before {
+  content: "\f93b";
+  color: rgb(40, 149, 213);
+}
+.icon-SkyDeskSupport .path2:before {
+  content: "\f93c";
+  margin-left: -3.1083984375em;
+  color: rgb(115, 115, 115);
+}
+.icon-spam:before {
+  content: "\f93d";
+}
+.icon-telephone:before {
+  content: "\f93e";
+}
+.icon-TelephonyDashboard .path1:before {
+  content: "\f93f";
+  color: rgb(204, 204, 204);
+  opacity: 0.1;
+}
+.icon-TelephonyDashboard .path2:before {
+  content: "\f940";
+  margin-left: -1em;
+  color: rgb(216, 216, 216);
+  opacity: 0.1;
+}
+.icon-TelephonyDashboard .path3:before {
+  content: "\f941";
+  margin-left: -1em;
+  color: rgb(81, 81, 81);
+  opacity: 0.1;
+}
+.icon-TelephonyDashboard .path4:before {
+  content: "\f942";
+  margin-left: -1em;
+  color: rgb(234, 234, 234);
+}
+.icon-TelephonyDashboard .path5:before {
+  content: "\f943";
+  margin-left: -1em;
+  color: rgb(242, 242, 242);
+}
+.icon-ticknew:before {
+  content: "\f944";
+}
+.icon-TPCRM05-01:before {
+  content: "\f945";
+}
+.icon-twit:before {
+  content: "\f946";
+}
+.icon-zd_live_chat:before {
+  content: "\f947";
+}
+.icon-zd-self-service:before {
+  content: "\f948";
+}
+.icon-zd-social:before {
+  content: "\f949";
+}
+.icon-Zoho-Desk:before {
+  content: "\f94a";
+}
+.icon-Bigin_Logo:before {
+  content: "\f94b";
+  color: #049949;
+}
 }

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

@@ -1,7 +1,10 @@
 @font-face {
   font-family:"zdfonts-react-integrations";
-  src: url('../fonts/zd-integrations.woff2') format('woff2'),
-       url('../fonts/zd-integrations.woff') format('woff');
+  src:
+    url('../fonts/zd-integrations.woff2') format('woff2'),
+    
+    url('../fonts/zd-integrations.woff') format('woff'),
+    url('../fonts/zd-integrations.svg#zdfonts') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -15,13 +18,37 @@
 	font-family:"zdfonts-react-integrations" !important;
 }
 
-/* Define icon codes */
-.icon-intProject .path1:before { content: "\b2000";  color: rgb(226, 46, 43); }
-.icon-intProject .path2:before { content: "\b2001"; margin-left: -1em; color: rgb(245, 130, 32); }
-.icon-intProject .path3:before { content: "\b2002"; margin-left: -1em; color: rgb(44, 124, 73); }
-.icon-intProject .path4:before { content: "\b2003"; margin-left: -1em; color: rgb(57, 89, 163); }
-
-.icon-disLink .path1:before { content: "\b2004";  color: rgb(51, 51, 51); }
-.icon-disLink .path2:before { content: "\b2005"; margin-left: -1em; color: rgb(0, 0, 0); }
-.icon-disLink .path3:before { content: "\b2006"; margin-left: -1em; color: rgb(0, 0, 0); }
+.icon-intProject .path1:before {
+  content: "\e2000";
+  color: rgb(226, 46, 43);
+}
+.icon-intProject .path2:before {
+  content: "\e2001";
+  margin-left: -1em;
+  color: rgb(245, 130, 32);
+}
+.icon-intProject .path3:before {
+  content: "\e2002";
+  margin-left: -1em;
+  color: rgb(44, 124, 73);
+}
+.icon-intProject .path4:before {
+  content: "\e2003";
+  margin-left: -1em;
+  color: rgb(57, 89, 163);
+}
+.icon-disLink .path1:before {
+  content: "\e2004";
+  color: rgb(51, 51, 51);
+}
+.icon-disLink .path2:before {
+  content: "\e2005";
+  margin-left: -1em;
+  color: rgb(0, 0, 0);
+}
+.icon-disLink .path3:before {
+  content: "\e2006";
+  margin-left: -1em;
+  color: rgb(0, 0, 0);
+}
 }