@zohodesk/icons 1.3.14 → 1.4.0

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

@@ -13,11 +13,7 @@
 @layer dot-icons.core {
 /*$Id$*/
 
-
-.icon-pagesense,.icon-add-component,.icon-attach16,.icon-checkmark,.icon-comment-new,.icon-comment,.icon-department,.icon-edit-mp-012,.icon-expand,.icon-expand1,.icon-flag5,.icon-forward-new,.icon-insight,.icon-JIRA_logo1,.icon-matrix-report2,.icon-multiline,.icon-overview-icon1,.icon-overview-icon2,.icon-overview-icon3,.icon-prop,.icon-r-area,.icon-r-donut,.icon-r-funnel1,.icon-r-funnel2,.icon-r-line1,.icon-r-line2,.icon-r-pie1,.icon-r-pie2,.icon-r-table1,.icon-r-table2,.icon-r-vbar1,.icon-r-vbar01,.icon-r-vbar2,.icon-r-vbar02,.icon-r-vbar3,.icon-r-vbar03,.icon-replyall-new,.icon-reports-area,.icon-reports-funnel,.icon-reports-line,.icon-reports-pie,.icon-reports-table1,.icon-resize,.icon-set-as-default,.icon-solution_new1,.icon-summary-report2,.icon-t-line2,.icon-tabular-report2,.icon-tag,.icon-vertical-bar1,.icon-vertical-bar2,.icon-vertical-bar3,.icon-tableTask,.icon-tableTicket,.icon-tableContact,.icon-tableAccount,.icon-multipleLine,.icon-table,.icon-percentageBar,.icon-pie,.icon-line,.icon-funnel,.icon-stackedBar,.icon-bar,.icon-barGraph,.icon-barLineGraph,.icon-dialMeter,.icon-donutChart,.icon-lineGraph,.icon-listGraph,.icon-multilineGraph,.icon-pieChart,.icon-pieChartFill,.icon-tableChart,.icon-wordCloud,.icon-barHorizontal,.icon-reportRedirection,.icon-graphView{
-	font-family:"zdfonts-react-reports" !important;
-}
-
+.ff{font-family:"zdfonts-react-reports" !important;}
 .icon-pagesense:before {
   content: "\f200";
 }

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

@@ -13,11 +13,7 @@
 @layer dot-icons.core {
 /*$Id$*/
 
-
-.icon-regenerateToken,.icon-access2,.icon-addons2,.icon-api2,.icon-arrow-t-right,.icon-ASAP-setup,.icon-assign,.icon-automation,.icon-bubbles3,.icon-business-hour,.icon-channels-4,.icon-circlePlus1,.icon-com-addbadge,.icon-com-badges,.icon-com-bluebadge,.icon-com-gamedisable,.icon-com-greenbadge,.icon-com-levelexpert,.icon-com-levels,.icon-com-points,.icon-com-redbadge,.icon-common-badges1,.icon-common-badges2,.icon-common-badges3,.icon-common-badges4,.icon-common-badges5,.icon-common-badges6,.icon-common-badges7,.icon-common-badges8,.icon-common-badges9,.icon-common-badges10,.icon-community1,.icon-company,.icon-contract,.icon-copy4,.icon-cp2,.icon-csrating,.icon-customize,.icon-department,.icon-draganddrop-small,.icon-Email-type,.icon-email2,.icon-escalate,.icon-eye3,.icon-fields1,.icon-free-traial-extn,.icon-google-apps,.icon-integ2,.icon-kb-essential-pen,.icon-kb-essential-tools,.icon-KB-UI-Interface_Image,.icon-layouts,.icon-lifeline15,.icon-linkurl,.icon-macro,.icon-My-Information,.icon-new-noti1,.icon-newchatgreenicn,.icon-open,.icon-organisation,.icon-others,.icon-power-button,.icon-products,.icon-rebrand1,.icon-recyclebin,.icon-setup_1,.icon-setup-sort27,.icon-social,.icon-sort27,.icon-supervise,.icon-sync-after,.icon-sync-schedule,.icon-sync-setting,.icon-sync,.icon-syncing-new,.icon-syncing,.icon-t-status1,.icon-tab-1,.icon-Tablock,.icon-teams,.icon-teams1,.icon-teams2,.icon-telephony,.icon-templates,.icon-tick_new1,.icon-workflow,.icon-zwitch,.icon-rolesSub,.icon-roles{
-	font-family:"zdfonts-react-setup" !important;
-}
-
+.ff{font-family:"zdfonts-react-setup" !important;}
 .icon-regenerateToken:before {
   content: "\f300";
 }

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

@@ -13,11 +13,7 @@
 @layer dot-icons.core {
 /*$Id$*/
 
-
-.icon-BrandsDefault,.icon-ic-social_advance-filter,.icon-ic-social_am,.icon-ic-social_arrow-fill,.icon-ic-social_arrow-line,.icon-ic-social_assign-1,.icon-ic-social_assign-2,.icon-ic-social_awesome,.icon-ic-social_Brand,.icon-ic-social_calander,.icon-ic-social_close,.icon-ic-social_comment,.icon-ic-social_conversation,.icon-ic-social_convert-ticket-1,.icon-ic-social_convert-ticket-2,.icon-ic-social_crm-info,.icon-ic-social_dashboard,.icon-ic-social_delete-07,.icon-ic-social_delete-20,.icon-ic-social_down,.icon-ic-social_download,.icon-ic-social_favorite-2,.icon-ic-social_favorite,.icon-ic-social_fb-2,.icon-ic-social_fb-attachment,.icon-ic-social_fb-comment,.icon-ic-social_fb-emoji,.icon-ic-social_fb-like,.icon-ic-social_fb-line,.icon-ic-social_fb-message,.icon-ic-social_fb-post,.icon-ic-social_fb-react-angrya,.icon-ic-social_fb-react-haha,.icon-ic-social_fb-react-like,.icon-ic-social_fb-react-love,.icon-ic-social_fb-react-sad,.icon-ic-social_fb-react-wow,.icon-ic-social_fb-share-2,.icon-ic-social_fb-share,.icon-ic-social_fb-square,.icon-ic-social_fb-sticker,.icon-ic-social_feeds,.icon-ic-social_filter,.icon-ic-social_great,.icon-ic-social_help,.icon-ic-social_inbox,.icon-ic-social_jpg,.icon-ic-social_line_graph,.icon-ic-social_location,.icon-ic-social_mention,.icon-ic-social_mine,.icon-ic-social_mobile-phone,.icon-ic-social_monitor,.icon-ic-social_more,.icon-ic-social_new-window,.icon-ic-social_next,.icon-ic-social_pdf,.icon-ic-social_periority-clock,.icon-ic-social_pm,.icon-ic-social_post-normal,.icon-ic-social_post-selected,.icon-ic-social_previous,.icon-ic-social_profile-normal,.icon-ic-social_profile-selected,.icon-ic-social_reply-2,.icon-ic-social_reply,.icon-ic-social_report-3,.icon-ic-social_reports,.icon-ic-social_search-1,.icon-ic-social_search-2,.icon-ic-social_search-3,.icon-ic-social_spam-2,.icon-ic-social_spam,.icon-ic-social_tag,.icon-ic-social_team,.icon-ic-social_ticket-normal,.icon-ic-social_ticket-selected,.icon-ic-social_twitter-2,.icon-ic-social_twitter-attachment,.icon-ic-social_twitter-emoji,.icon-ic-social_twitter-like,.icon-ic-social_twitter-line,.icon-ic-social_twitter-message,.icon-ic-social_twitter-post,.icon-ic-social_twitter-reply,.icon-ic-social_twitter-retweet,.icon-ic-social_twitter-square,.icon-ic-social_up,.icon-ic-social_user-2,.icon-ic-social_video,.icon-ic-social_view,.icon-ic-social_worst,.icon-ic-social_zoom-in,.icon-ic-social_zoom-out,.icon-ic-social-all-feeds,.icon-ic-social-menu,.icon-ic-social-tick,.icon-Re-Authentication{
-	font-family:"zdfonts-react-social" !important;
-}
-
+.ff{font-family:"zdfonts-react-social" !important;}
 .icon-BrandsDefault:before {
   content: "\f450";
 }

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

@@ -13,11 +13,7 @@
 @layer dot-icons.core {
 /*$Id$*/
 
-
-.icon-happinessBad,.icon-happinessGood,.icon-happinessOk,.icon-chForwardDraft,.icon-chWidget,.icon-chWebOut,.icon-chMailForward,.icon-chDraftNew,.icon-chDirectFB,.icon-chPhoneOut,.icon-chPhoneIn,.icon-chChat,.icon-chChatIn,.icon-chChatOut,.icon-chDraft,.icon-chFacebook,.icon-chFacebookIn,.icon-chFacebookOut,.icon-chForum,.icon-chForumIn,.icon-chForumOut,.icon-chHappiness,.icon-chHappinessIn,.icon-chMail,.icon-chMailDraft,.icon-chMailIn,.icon-chMailOut,.icon-chPhone,.icon-chTwitter,.icon-chTwitterIn,.icon-chTwitterOut,.icon-chWeb,.icon-chWemIn,.icon-chWenOut{
-	font-family:"zdfonts-ticket-channels" !important;
-}
-
+.ff{font-family:"zdfonts-ticket-channels" !important;}
 .icon-happinessBad:before {
   content: "\e1000";
 }

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

@@ -13,11 +13,7 @@
 @layer dot-icons.core {
 /*$Id$*/
 
-
-.icon-ch-phone-in,.icon-ch-phone-out,.icon-ch-phone,.icon-tableView,.icon-ticketCloning,.icon-botHash,.icon-survey,.icon-activityCalls,.icon-activityIn,.icon-activityOut,.icon-add-ag,.icon-add-follower,.icon-add-task,.icon-approvalok,.icon-approvalrej,.icon-approvalsent,.icon-arrow-left2,.icon-attach16,.icon-books,.icon-botHead,.icon-botNegative,.icon-botNeutral,.icon-botPositive,.icon-bug-info1,.icon-buginfo,.icon-ch-chat-in,.icon-ch-chat-mis,.icon-ch-chat,.icon-ch-email-dft,.icon-ch-email-fwd,.icon-ch-email-in,.icon-ch-email-out,.icon-ch-email1,.icon-ch-facebook_dm-in,.icon-ch-facebook_dm-out,.icon-ch-facebook-dft,.icon-ch-facebook-in,.icon-ch-facebook-out,.icon-ch-facebook,.icon-ch-feedback-mis,.icon-ch-feedback-out,.icon-ch-feedback,.icon-ch-feedbackwidget,.icon-ch-forums-dft,.icon-ch-forums-in,.icon-ch-forums-out,.icon-ch-forums,.icon-ch-twitter-dft,.icon-ch-twitter-in,.icon-ch-twitter-out,.icon-ch-twitter,.icon-ch-web-in,.icon-ch-web,.icon-circle-check2,.icon-circle-plus,.icon-classicView,.icon-comment-add,.icon-comment-delt,.icon-comment-edit,.icon-comment-new,.icon-CommentRound,.icon-comments-1,.icon-compactView,.icon-copy2,.icon-countdownQueue,.icon-customfunc,.icon-customizeTable,.icon-del-call,.icon-del-draft,.icon-del-event,.icon-del-task,.icon-del-ticket,.icon-delete-2,.icon-discard_draft,.icon-download-new,.icon-draft-delete,.icon-edit_draft,.icon-edit-task,.icon-email-fwd,.icon-email-in,.icon-email-out,.icon-Email1,.icon-escalate,.icon-Exclamation-new,.icon-feedback,.icon-file-attach,.icon-file-delt,.icon-file-edit,.icon-file-rbn-dlt,.icon-file-restore,.icon-flag5,.icon-forward-new,.icon-forwarddft,.icon-handshakeQueue,.icon-invisible-new,.icon-Invoice,.icon-JIRA_logo1,.icon-linkurl2,.icon-macro,.icon-mail-failed,.icon-merge,.icon-move,.icon-new-noti,.icon-newuser,.icon-original-view,.icon-overdue,.icon-phone,.icon-pin-dark2,.icon-priority-mode,.icon-priorityQueue,.icon-prop,.icon-Rec,.icon-remove-follower,.icon-reply_draft,.icon-reply-new,.icon-replyall-new,.icon-reqcount2,.icon-res-add,.icon-res-delt,.icon-res-modify,.icon-responsive-icon-final,.icon-restore-call,.icon-restore-event,.icon-restore-task,.icon-restore-ticket,.icon-showoriginal,.icon-smartview-icon,.icon-smily-good,.icon-snippet_pen,.icon-snippet_star,.icon-snippet,.icon-solution_new1,.icon-sort27,.icon-sphere,.icon-split_new,.icon-statusQueue,.icon-t-line,.icon-t-line1,.icon-t-line2,.icon-t,.icon-Tablock2,.icon-tag,.icon-telephone1,.icon-ticket-reopen,.icon-ticket-stat,.icon-time-add,.icon-time-delt,.icon-time-edit,.icon-time-restore,.icon-Time-tracker2,.icon-timeline,.icon-timerPause,.icon-timerStart,.icon-update-call,.icon-update-event,.icon-update-ticket,.icon-update,.icon-viaAPI,.icon-visible-new,.icon-zdCRMQueue-new,.icon-zdCRMQueue,.icon-zdDuetimeQueue-new,.icon-zdDuetimeQueue1,.icon-zdesk-ellipsis,.icon-zdPriorityQueue-new,.icon-zdpriorityQueue,.icon-zdstatusqueue-new,.icon-zdstatusqueue,.icon-prioritymode,.icon-biginQueue-new,.icon-biginQueue,.icon-returns,.icon-packages,.icon-inventry,.icon-paperPlane,.icon-noViewer,.icon-subscription,.icon-hideTab,.icon-archivedFile,.icon-languageDetector,.icon-ticketView,.icon-prediction,.icon-instaIM,.icon-analytics,.icon-customer{
-	font-family:"zdfonts-react-tickets" !important;
-}
-
+.ff{font-family:"zdfonts-react-tickets" !important;}
 .icon-ch-phone-in .path1:before {
   content: "\f5000";
   color: rgb(0, 0, 0);

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

@@ -13,11 +13,7 @@
 @layer dot-icons.core {
 /*$Id$*/
 
-
-.icon-integrationPlug,.icon-accounts-new3,.icon-active-user,.icon-activities,.icon-add-agent,.icon-advancesearch,.icon-agent-new2,.icon-approval,.icon-approval3,.icon-arrow-down,.icon-arrow-right,.icon-arrow-t-left,.icon-arrow-up,.icon-articles-new3,.icon-ascend,.icon-attachment5,.icon-back,.icon-back2,.icon-bell3,.icon-Block-down-arrow,.icon-blog,.icon-bug-info,.icon-call-end,.icon-chat-message,.icon-chats30,.icon-check,.icon-clasicview,.icon-Clear-all,.icon-close-e,.icon-close22,.icon-cloud-icon,.icon-collage,.icon-community30,.icon-compact_view,.icon-contacts-new3,.icon-copy22,.icon-cross,.icon-cross72,.icon-customer30,.icon-d-pref,.icon-dashboard-new,.icon-dashboard-new1,.icon-delete-2,.icon-descend,.icon-dialpad,.icon-down,.icon-down1,.icon-events,.icon-Expand,.icon-eye-icn-new,.icon-fb2,.icon-feedback3,.icon-feeds-new1,.icon-file-empty,.icon-forums-new3,.icon-Full-screen,.icon-funnel3,.icon-grid,.icon-home2,.icon-hotspot,.icon-Idea-1px,.icon-image,.icon-KB-TOP-BAR_Gamification,.icon-KB-TOP-BAR_Notification,.icon-KB-TOP-BAR_Setup,.icon-KB30,.icon-kbmorefilter,.icon-keyboard_backspace,.icon-Keyboard3,.icon-lang-1,.icon-LHSAccounts,.icon-LHSarticles,.icon-LHSContacts,.icon-LHSFeeds,.icon-LHSForums,.icon-LHSHQ,.icon-LHSOverview,.icon-LHSQueue,.icon-LHSReports,.icon-LHSViews,.icon-list22,.icon-livechat3,.icon-location2,.icon-macro2,.icon-mail-o,.icon-mancat,.icon-maximize,.icon-menu,.icon-menu1,.icon-minimize,.icon-minus,.icon-mobile,.icon-moicon-03,.icon-moicons-04,.icon-more1,.icon-more22,.icon-mute1-new,.icon-newtab,.icon-newuser,.icon-next-step,.icon-notifi-exclamation,.icon-notofication-new,.icon-orange-arrow,.icon-overview-new3,.icon-p-star,.icon-p-star1,.icon-p-star2,.icon-paiduser,.icon-pen-01,.icon-pen2,.icon-plus,.icon-power-button,.icon-printing2,.icon-products2,.icon-pull-down,.icon-recent3,.icon-reports-new3,.icon-reports30,.icon-search,.icon-search3,.icon-share,.icon-Signup-page,.icon-SkyDeskSupport,.icon-social30,.icon-speaker-new,.icon-square-minus,.icon-tag-new1,.icon-task-demo,.icon-task30,.icon-team-queue,.icon-telephone-thick,.icon-tick_new,.icon-tickets30,.icon-ticknew,.icon-toprightnotifi,.icon-toprightsearch,.icon-toprightseting,.icon-TPAdd,.icon-twit,.icon-Unassociated,.icon-update,.icon-views-new2,.icon-webinar,.icon-zd_live_chat,.icon-ZD-accounts,.icon-ZD-activities,.icon-ZD-calls,.icon-ZD-cases,.icon-ZD-chat,.icon-ZD-community,.icon-ZD-contacts,.icon-ZD-events,.icon-ZD-forums,.icon-ZD-reports,.icon-ZD-Setup,.icon-ZD-socials,.icon-ZD-solutions,.icon-ZD-tasks,.icon-zdesk-commentfilled,.icon-zdfeedback,.icon-zdresend,.icon-zia,.icon-Zoho-Desk,.icon-zoom-in,.icon-zoom-out,.icon-whatsApp,.icon-notificationDot{
-	font-family:"zdfonts-react-topband" !important;
-}
-
+.ff{font-family:"zdfonts-react-topband" !important;}
 .icon-integrationPlug:before {
   content: "\f600";
 }

package/cbt.config.js

@@ -75,7 +75,7 @@ exports.config = {
               "zdfonts-rTopband": "zdf-rTopband_5",
               "zdfonts-rTwotone": "zdf-rTwotone_28",
               "zdfonts-rAccessibility": "zdf-rAccessibility_2",
-              "zdfonts-rUpdates": "zdf-rUpdates_1",
+              "zdfonts-rUpdates": "zdf-rUpdates_2",
               "zdfonts-rAI": "zdf-rAI_5",
               "zdfonts-rAutomation": "zdf-rAutomation_5",
               "zdfonts-rDeveloperSpace": "zdf-rDeveloperSpace_1",

package/es/Context/__tests__/__snapshots__/IconContext.spec.js.snap

@@ -4,7 +4,7 @@ exports[`IconProvider / IconContext -  default context - renders font icon (no p
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic icon-close2"
+    class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -43,7 +43,7 @@ exports[`IconProvider / IconContext -  type "fontIcon" - renders font icon 1`] =
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic icon-close2"
+    class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"

package/es/Icon/FontFactory.js

@@ -2348,7 +2348,19 @@ export const FontFactory = {
   ReactProductUpdatesIcon: {
     'ZD-PU-privacySecurity': 'icon-privacySecurity',
     'ZD-PU-communityDashboard': 'icon-communityDashboard',
-    'ZD-PU-agentDetails': 'icon-agentDetails'
+    'ZD-PU-agentDetails': 'icon-agentDetails',
+    'ZD-PU-addThread': 'icon-addThread',
+    'ZD-PU-articleNumber': 'icon-articleNumber',
+    'ZD-PU-attachmentAnnotator': 'icon-attachmentAnnotator',
+    'ZD-PU-gcEnhancement': 'icon-gcEnhancement',
+    'ZD-PU-instantMessaging': 'icon-instantMessaging',
+    'ZD-PU-multipleTime': 'icon-multipleTime',
+    'ZD-PU-multiYear': 'icon-multiYear',
+    'ZD-PU-openID': 'icon-openID',
+    'ZD-PU-passwordProtection': 'icon-passwordProtection',
+    'ZD-PU-subtab': 'icon-subtab',
+    'ZD-PU-templates': 'icon-templates',
+    'ZD-PU-ziaAssistanceCF': 'icon-ziaAssistanceCF'
   },
   ReactAIIcon: {
     'ZD-AI-ziaSummary': 'icon-ziaSummary',

package/es/Icon/FontIcon.js

@@ -1,11 +1,11 @@
+import { cn } from "@dot-system/css-utility";
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import { IconDefaultProps } from "./props/defaultProps";
 import { IconProps } from "./props/propTypes";
-import { allCustomIcons } from "./CustomIcons";
-import { cn } from "@dot-system/css-utility";
-import style from "./Icon.module.css";
+import { fontIcon_cva } from "./css/cssJSLogic";
 export default class FontIcon extends React.Component {
   render() {
     let {
@@ -29,21 +29,35 @@ export default class FontIcon extends React.Component {
     } = a11y;
     let fontStyle = size ? {
       '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
-    } : {};
-    let isCustom = allCustomIcons[iconName] || null;
-    isCustom = isCustom ? style[isCustom] : ''; // let isTwoTone = TwoToneIcons[iconName] || null;
+    } : {}; // let isTwoTone = TwoToneIcons[iconName] || null;
     // isTwoTone = isTwoTone ? style[isTwoTone] : '';
 
-    let fontClass = `${style.basic} ${pathName} ${isBold ? style.fbold : ''} ${onClick ? style.cursor : ''} ${iconClass ? iconClass : ''}`;
+    let isRtl = false;
     let childArray;
 
     if (typeof name === 'object') {
       childArray = [];
-      let isRtl = name[2] ? name[2] : false;
-      fontClass = isRtl ? `${style.rtl} ${fontClass}` : fontClass;
+      isRtl = name[2] ? name[2] : false;
+    }
 
+    const {
+      fontIconClass,
+      customColorKey
+    } = fontIcon_cva({
+      props: {
+        isBold,
+        onClick,
+        isRtl,
+        iconName,
+        pathName,
+        iconContent,
+        iconClass
+      }
+    });
+
+    if (typeof name === 'object') {
       for (let i = 1; i < name[1] + 1; i++) {
-        let pathClass = `${iconContent[`path${i}`]} ${iconClass || isCustom ? `path${i}` : ''}`;
+        let pathClass = `${iconContent[`path${i}`]} ${iconClass || customColorKey ? `path${i}` : ''}`;
         childArray.push( /*#__PURE__*/React.createElement("span", {
           className: cn(pathClass),
           key: i
@@ -52,7 +66,7 @@ export default class FontIcon extends React.Component {
     }
 
     return /*#__PURE__*/React.createElement("i", _extends({
-      className: cn(`${'zd_font_icons'} ${isCustom} ${fontClass}`),
+      className: cn(fontIconClass),
       "data-title": title,
       onClick: onClick,
       "data-id": dataId,

package/es/Icon/Icon.module.css

@@ -9,8 +9,6 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  vertical-align: middle;
   font-size: var(--zd-iconfont-size, inherit);
 }
 .basic,.basic > span{
@@ -24,14 +22,6 @@
   font-size: var(--zd-iconfont-size, inherit);
 }
 
-.fbold {
-  font-weight: bold;
-}
-
-.cursor {
-  cursor: pointer;
-}
-
 .red :global .path2::before,
 .red2 :global .path3::before {
   color: #de3535 !important;

package/es/Icon/SvgIcon.js

@@ -26,7 +26,7 @@ export default function SvgIcon({
   let fontStyle = size ? {
     '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
   } : DUMMY_OBJECT;
-  let className = `${style.svgIcon} ${onClick ? style.cursor : ''} ${iconClass ? iconClass : ''}`;
+  let className = `${style.svgIcon} ${onClick ? 'd-cursor-pointer' : ''} ${iconClass ? iconClass : ''}`;
   return /*#__PURE__*/React.createElement("svg", _extends({
     className: cn(className),
     onClick: onClick,

package/es/Icon/__tests__/__snapshots__/FontIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`FontIcon -  checking "isBold" is false 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -16,7 +16,7 @@ exports[`FontIcon -  checking "isBold" is true 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic fbold"
+    class="zd_font_icons basic d-inline-block d-align-middle d-font-bold"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -28,7 +28,7 @@ exports[`FontIcon -  rendering "IconName" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -40,7 +40,7 @@ exports[`FontIcon -  rendering "Name" with "iconContent" and without path 1`] =
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -62,7 +62,7 @@ exports[`FontIcon -  rendering "ariaHidden" is false 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="false"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -74,7 +74,7 @@ exports[`FontIcon -  rendering "custumIcon" with path 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons red basic"
+    class="zd_font_icons red basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`FontIcon -  rendering "iconClass" with path  1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic iconStyleCss"
+    class="zd_font_icons basic d-inline-block d-align-middle iconStyleCss"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -115,7 +115,7 @@ exports[`FontIcon -  rendering custom attributes with tagAttributes prop 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-custom-attr="true"
     data-id="fontIcon"
     data-selector-id="fontIcon"
@@ -128,7 +128,7 @@ exports[`FontIcon -  rendering custom icon name 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons red basic"
+    class="zd_font_icons red basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -140,7 +140,7 @@ exports[`FontIcon -  rendering the "default" props 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -152,7 +152,7 @@ exports[`FontIcon -  rendering the "fontSize" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -165,7 +165,7 @@ exports[`FontIcon -  rendering the "iconClass" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic iconStyleCss"
+    class="zd_font_icons basic d-inline-block d-align-middle iconStyleCss"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -177,7 +177,7 @@ exports[`FontIcon -  rendering the "pathname" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic zd67f91bb627"
+    class="zd_font_icons zd67f91bb627 basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -189,7 +189,7 @@ exports[`FontIcon -  rendering the "title" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -202,7 +202,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - bottom 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -215,7 +215,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - left 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -228,7 +228,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - right 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -241,7 +241,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - top 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"