diff --git a/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx b/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx index dc9022873..630a0fea1 100644 --- a/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx +++ b/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx @@ -11,7 +11,7 @@ function AddCardModal(props: Props) { <> - + ); diff --git a/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx b/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx index c28389c4a..056f7a0d9 100644 --- a/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx +++ b/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx @@ -16,29 +16,36 @@ export interface MetricType { interface Props { metric: MetricType; onClick?: any; + isList?: boolean; } function MetricTypeItem(props: Props) { const { metric: { title, icon, description, slug, disabled }, - onClick = () => {}, + onClick = () => { + }, + isList = false } = props; return (
-
+
{/* @ts-ignore */} - +
-
-
{title}
-
{description}
+
+
{title}
+
{description}
diff --git a/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx index 898ab416b..b516c6cdb 100644 --- a/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx +++ b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx @@ -13,10 +13,11 @@ interface Props extends RouteComponentProps { dashboardId?: number; siteId: string; isEnterprise: boolean; + isList?: boolean; } function MetricTypeList(props: Props) { - const { dashboardId, siteId, history, isEnterprise } = props; + const { dashboardId, siteId, history, isEnterprise, isList = false } = props; const { metricStore } = useStore(); const { showModal, hideModal } = useModal(); @@ -25,6 +26,7 @@ function MetricTypeList(props: Props) { const disabled = metric.slug === INSIGHTS && !isEnterprise; return { ...metric, + icon: `db-icons/icn-card-${metric.slug}`, disabled: metric.slug === INSIGHTS && !isEnterprise, tooltipTitle: disabled ? ENTERPRISE_REQUEIRED : '' }; @@ -59,7 +61,7 @@ function MetricTypeList(props: Props) { return ( <> {list.map((metric: MetricType) => ( - onClick(metric)} /> + onClick(metric)} isList={isList} /> ))} ); diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index 3325527fd..a775916f2 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -1,7 +1,7 @@ import React from 'react'; -export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope-check' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'journal-code' | 'key' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'magic' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; +export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'db-icons/icn-card-clickMap' | 'db-icons/icn-card-errors' | 'db-icons/icn-card-funnel' | 'db-icons/icn-card-insights' | 'db-icons/icn-card-library' | 'db-icons/icn-card-mapchart' | 'db-icons/icn-card-performance' | 'db-icons/icn-card-resources' | 'db-icons/icn-card-table' | 'db-icons/icn-card-timeseries' | 'db-icons/icn-card-userPath' | 'db-icons/icn-card-webVitals' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope-check' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'journal-code' | 'key' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'magic' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; interface Props { name: IconNames; @@ -15,19 +15,19 @@ interface Props { const SVG = (props: Props) => { const { name, size = 14, width = size, height = size, fill = '' } = props; switch (name) { - case 'activity': return ; + case 'activity': return ; case 'alarm-clock': return ; case 'alarm-plus': return ; case 'all-sessions': return ; case 'analytics': return ; case 'anchor': return ; case 'arrow-alt-square-right': return ; - case 'arrow-bar-left': return ; + case 'arrow-bar-left': return ; case 'arrow-clockwise': return ; case 'arrow-counterclockwise': return ; case 'arrow-down-short': return ; case 'arrow-down': return ; - case 'arrow-repeat': return ; + case 'arrow-repeat': return ; case 'arrow-right-short': return ; case 'arrow-square-left': return ; case 'arrow-square-right': return ; @@ -72,13 +72,13 @@ const SVG = (props: Props) => { case 'avatar/icn_wild_bore': return ; case 'ban': return ; case 'bar-chart-line': return ; - case 'bar-pencil': return ; - case 'bell-fill': return ; + case 'bar-pencil': return ; + case 'bell-fill': return ; case 'bell-plus': return ; - case 'bell-slash': return ; + case 'bell-slash': return ; case 'bell': return ; case 'binoculars': return ; - case 'book-doc': return ; + case 'book-doc': return ; case 'book': return ; case 'browser/browser': return ; case 'browser/chrome': return ; @@ -89,26 +89,26 @@ const SVG = (props: Props) => { case 'browser/ie': return ; case 'browser/opera': return ; case 'browser/safari': return ; - case 'buildings': return ; + case 'buildings': return ; case 'bullhorn': return ; case 'business-time': return ; case 'calendar-alt': return ; case 'calendar-check': return ; case 'calendar-day': return ; case 'calendar': return ; - case 'call': return ; + case 'call': return ; case 'camera-alt': return ; case 'camera-video-off': return ; case 'camera-video': return ; case 'camera': return ; - case 'card-checklist': return ; - case 'card-text': return ; - case 'caret-down-fill': return ; + case 'card-checklist': return ; + case 'card-text': return ; + case 'caret-down-fill': return ; case 'caret-left-fill': return ; case 'caret-right-fill': return ; - case 'caret-up-fill': return ; + case 'caret-up-fill': return ; case 'chat-dots': return ; - case 'chat-right-text': return ; + case 'chat-right-text': return ; case 'chat-square-quote': return ; case 'check-circle-fill': return ; case 'check-circle': return ; @@ -119,10 +119,10 @@ const SVG = (props: Props) => { case 'chevron-left': return ; case 'chevron-right': return ; case 'chevron-up': return ; - case 'circle-fill': return ; + case 'circle-fill': return ; case 'circle': return ; - case 'click-hesitation': return ; - case 'click-rage': return ; + case 'click-hesitation': return ; + case 'click-rage': return ; case 'clipboard-list-check': return ; case 'clock': return ; case 'close': return ; @@ -142,39 +142,51 @@ const SVG = (props: Props) => { case 'cookies': return ; case 'copy': return ; case 'credit-card-front': return ; - case 'cross': return ; + case 'cross': return ; case 'cubes': return ; - case 'cursor-trash': return ; + case 'cursor-trash': return ; case 'dash': return ; - case 'dashboard-icn': return ; + case 'dashboard-icn': return ; + case 'db-icons/icn-card-clickMap': return ; + case 'db-icons/icn-card-errors': return ; + case 'db-icons/icn-card-funnel': return ; + case 'db-icons/icn-card-insights': return ; + case 'db-icons/icn-card-library': return ; + case 'db-icons/icn-card-mapchart': return ; + case 'db-icons/icn-card-performance': return ; + case 'db-icons/icn-card-resources': return ; + case 'db-icons/icn-card-table': return ; + case 'db-icons/icn-card-timeseries': return ; + case 'db-icons/icn-card-userPath': return ; + case 'db-icons/icn-card-webVitals': return ; case 'desktop': return ; case 'device': return ; case 'diagram-3': return ; case 'dizzy': return ; - case 'door-closed': return ; + case 'door-closed': return ; case 'doublecheck': return ; case 'download': return ; case 'drag': return ; case 'edit': return ; case 'ellipsis-v': return ; case 'enter': return ; - case 'envelope-check': return ; + case 'envelope-check': return ; case 'envelope-x': return ; case 'envelope': return ; case 'errors-icon': return ; case 'event/click': return ; - case 'event/click_hesitation': return ; + case 'event/click_hesitation': return ; case 'event/clickrage': return ; case 'event/code': return ; case 'event/i-cursor': return ; case 'event/input': return ; - case 'event/input_hesitation': return ; + case 'event/input_hesitation': return ; case 'event/link': return ; - case 'event/location': return ; - case 'event/mouse_thrashing': return ; + case 'event/location': return ; + case 'event/mouse_thrashing': return ; case 'event/resize': return ; case 'event/view': return ; - case 'exclamation-circle-fill': return ; + case 'exclamation-circle-fill': return ; case 'exclamation-circle': return ; case 'expand-wide': return ; case 'explosion': return ; @@ -187,9 +199,9 @@ const SVG = (props: Props) => { case 'fflag-single': return ; case 'file-code': return ; case 'file-medical-alt': return ; - case 'file-pdf': return ; + case 'file-pdf': return ; case 'file': return ; - case 'files': return ; + case 'files': return ; case 'filter': return ; case 'filters/arrow-return-right': return ; case 'filters/browser': return ; @@ -198,13 +210,13 @@ const SVG = (props: Props) => { case 'filters/code': return ; case 'filters/console': return ; case 'filters/country': return ; - case 'filters/cpu-load': return ; + case 'filters/cpu-load': return ; case 'filters/custom': return ; case 'filters/device': return ; case 'filters/dom-complete': return ; case 'filters/duration': return ; case 'filters/error': return ; - case 'filters/fetch-failed': return ; + case 'filters/fetch-failed': return ; case 'filters/fetch': return ; case 'filters/file-code': return ; case 'filters/graphql': return ; @@ -216,19 +228,19 @@ const SVG = (props: Props) => { case 'filters/memory-load': return ; case 'filters/metadata': return ; case 'filters/os': return ; - case 'filters/perfromance-network-request': return ; + case 'filters/perfromance-network-request': return ; case 'filters/platform': return ; case 'filters/referrer': return ; case 'filters/resize': return ; case 'filters/rev-id': return ; case 'filters/state-action': return ; - case 'filters/ttfb': return ; + case 'filters/ttfb': return ; case 'filters/user-alt': return ; case 'filters/userid': return ; case 'filters/view': return ; case 'flag-na': return ; - case 'folder-plus': return ; - case 'folder2': return ; + case 'folder-plus': return ; + case 'folder2': return ; case 'fullscreen': return ; case 'funnel/cpu-fill': return ; case 'funnel/cpu': return ; @@ -252,20 +264,20 @@ const SVG = (props: Props) => { case 'funnel/mouse': return ; case 'funnel/patch-exclamation-fill': return ; case 'funnel/sd-card': return ; - case 'funnel-fill': return ; - case 'funnel-new': return ; + case 'funnel-fill': return ; + case 'funnel-new': return ; case 'funnel': return ; - case 'gear-fill': return ; - case 'gear': return ; + case 'gear-fill': return ; + case 'gear': return ; case 'geo-alt-fill-custom': return ; case 'github': return ; case 'graph-up-arrow': return ; - case 'graph-up': return ; + case 'graph-up': return ; case 'grid-1x2': return ; case 'grid-3x3': return ; case 'grid-check': return ; - case 'grid-horizontal': return ; - case 'grid': return ; + case 'grid-horizontal': return ; + case 'grid': return ; case 'grip-horizontal': return ; case 'hash': return ; case 'hdd-stack': return ; @@ -274,17 +286,17 @@ const SVG = (props: Props) => { case 'high-engagement': return ; case 'history': return ; case 'hourglass-start': return ; - case 'ic-errors': return ; - case 'ic-network': return ; - case 'ic-rage': return ; - case 'ic-resources': return ; + case 'ic-errors': return ; + case 'ic-network': return ; + case 'ic-rage': return ; + case 'ic-resources': return ; case 'id-card': return ; case 'image': return ; case 'info-circle-fill': return ; - case 'info-circle': return ; + case 'info-circle': return ; case 'info-square': return ; case 'info': return ; - case 'input-hesitation': return ; + case 'input-hesitation': return ; case 'inspect': return ; case 'integrations/assist': return ; case 'integrations/bugsnag-text': return ; @@ -300,13 +312,13 @@ const SVG = (props: Props) => { case 'integrations/jira': return ; case 'integrations/mobx': return ; case 'integrations/newrelic-text': return ; - case 'integrations/newrelic': return ; + case 'integrations/newrelic': return ; case 'integrations/ngrx': return ; case 'integrations/openreplay-text': return ; case 'integrations/openreplay': return ; case 'integrations/redux': return ; case 'integrations/rollbar-text': return ; - case 'integrations/rollbar': return ; + case 'integrations/rollbar': return ; case 'integrations/segment': return ; case 'integrations/sentry-text': return ; case 'integrations/sentry': return ; @@ -319,7 +331,7 @@ const SVG = (props: Props) => { case 'integrations/teams': return ; case 'integrations/vuejs': return ; case 'journal-code': return ; - case 'key': return ; + case 'key': return ; case 'layer-group': return ; case 'lightbulb-on': return ; case 'lightbulb': return ; @@ -329,7 +341,7 @@ const SVG = (props: Props) => { case 'list-ul': return ; case 'list': return ; case 'lock-alt': return ; - case 'magic': return ; + case 'magic': return ; case 'map-marker-alt': return ; case 'memory': return ; case 'mic-mute': return ; @@ -337,12 +349,12 @@ const SVG = (props: Props) => { case 'minus': return ; case 'mobile': return ; case 'mouse-alt': return ; - case 'network': return ; + case 'network': return ; case 'next1': return ; - case 'no-dashboard': return ; + case 'no-dashboard': return ; case 'no-metrics-chart': return ; - case 'no-metrics': return ; - case 'no-recordings': return ; + case 'no-metrics': return ; + case 'no-recordings': return ; case 'os/android': return ; case 'os/chrome_os': return ; case 'os/fedora': return ; @@ -356,12 +368,12 @@ const SVG = (props: Props) => { case 'pause-fill': return ; case 'pause': return ; case 'pdf-download': return ; - case 'pencil-stop': return ; + case 'pencil-stop': return ; case 'pencil': return ; - case 'people': return ; + case 'people': return ; case 'percent': return ; case 'performance-icon': return ; - case 'person-border': return ; + case 'person-border': return ; case 'person-fill': return ; case 'person': return ; case 'pie-chart-fill': return ; @@ -371,23 +383,23 @@ const SVG = (props: Props) => { case 'play-circle': return ; case 'play-fill-new': return ; case 'play-fill': return ; - case 'play-hover': return ; + case 'play-hover': return ; case 'play': return ; - case 'plug': return ; + case 'plug': return ; case 'plus-circle': return ; case 'plus-lg': return ; case 'plus': return ; - case 'pointer-sessions-search': return ; + case 'pointer-sessions-search': return ; case 'prev1': return ; case 'pulse': return ; case 'puzzle-piece': return ; - case 'puzzle': return ; + case 'puzzle': return ; case 'question-circle': return ; case 'question-lg': return ; case 'quote-left': return ; case 'quote-right': return ; case 'quotes': return ; - case 'record-btn': return ; + case 'record-btn': return ; case 'record-circle': return ; case 'redo-back': return ; case 'redo': return ; @@ -402,27 +414,27 @@ const SVG = (props: Props) => { case 'server': return ; case 'share-alt': return ; case 'shield-lock': return ; - case 'signpost-split': return ; + case 'signpost-split': return ; case 'signup': return ; case 'skip-forward-fill': return ; case 'skip-forward': return ; - case 'slack': return ; + case 'slack': return ; case 'slash-circle': return ; case 'sleep': return ; case 'sliders': return ; case 'social/slack': return ; case 'social/trello': return ; - case 'speedometer2': return ; + case 'speedometer2': return ; case 'spinner': return ; case 'star-solid': return ; case 'star': return ; case 'step-forward': return ; - case 'stickies': return ; + case 'stickies': return ; case 'stop-record-circle': return ; case 'stopwatch': return ; case 'store': return ; case 'sync-alt': return ; - case 'table-new': return ; + case 'table-new': return ; case 'table': return ; case 'tablet-android': return ; case 'tachometer-slow': return ; @@ -432,7 +444,7 @@ const SVG = (props: Props) => { case 'telephone-fill': return ; case 'telephone': return ; case 'text-paragraph': return ; - case 'toggles': return ; + case 'toggles': return ; case 'tools': return ; case 'trash': return ; case 'turtle': return ; diff --git a/frontend/app/svg/icons/book-doc.svg b/frontend/app/svg/icons/book-doc.svg index 7e6f2a680..2575fbb88 100644 --- a/frontend/app/svg/icons/book-doc.svg +++ b/frontend/app/svg/icons/book-doc.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/app/svg/icons/db-icons/icn-card-clickMap.svg b/frontend/app/svg/icons/db-icons/icn-card-clickMap.svg new file mode 100644 index 000000000..351842458 --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-clickMap.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-errors.svg b/frontend/app/svg/icons/db-icons/icn-card-errors.svg new file mode 100644 index 000000000..88fc95cca --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-errors.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-funnel.svg b/frontend/app/svg/icons/db-icons/icn-card-funnel.svg new file mode 100644 index 000000000..ffe3f7dc4 --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-funnel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-insights.svg b/frontend/app/svg/icons/db-icons/icn-card-insights.svg new file mode 100644 index 000000000..88e08ee56 --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-insights.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-library.svg b/frontend/app/svg/icons/db-icons/icn-card-library.svg new file mode 100644 index 000000000..2bba3e8a2 --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-library.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-mapchart.svg b/frontend/app/svg/icons/db-icons/icn-card-mapchart.svg new file mode 100644 index 000000000..2db6eb61d --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-mapchart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-performance.svg b/frontend/app/svg/icons/db-icons/icn-card-performance.svg new file mode 100644 index 000000000..956e77b7f --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-performance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-resources.svg b/frontend/app/svg/icons/db-icons/icn-card-resources.svg new file mode 100644 index 000000000..d0e38095c --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-resources.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-table.svg b/frontend/app/svg/icons/db-icons/icn-card-table.svg new file mode 100644 index 000000000..3be60054c --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-timeseries.svg b/frontend/app/svg/icons/db-icons/icn-card-timeseries.svg new file mode 100644 index 000000000..eec8e4bff --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-timeseries.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-userPath.svg b/frontend/app/svg/icons/db-icons/icn-card-userPath.svg new file mode 100644 index 000000000..004139d8f --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-userPath.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/db-icons/icn-card-webVitals.svg b/frontend/app/svg/icons/db-icons/icn-card-webVitals.svg new file mode 100644 index 000000000..61736c04e --- /dev/null +++ b/frontend/app/svg/icons/db-icons/icn-card-webVitals.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/exclamation-circle-fill.svg b/frontend/app/svg/icons/exclamation-circle-fill.svg index eebbd6833..76bfc22cf 100644 --- a/frontend/app/svg/icons/exclamation-circle-fill.svg +++ b/frontend/app/svg/icons/exclamation-circle-fill.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/app/svg/icons/flag-na.svg b/frontend/app/svg/icons/flag-na.svg index 33796e2f0..097130062 100644 --- a/frontend/app/svg/icons/flag-na.svg +++ b/frontend/app/svg/icons/flag-na.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/app/svg/icons/input-hesitation.svg b/frontend/app/svg/icons/input-hesitation.svg index 439606a52..3ac1ba99f 100644 --- a/frontend/app/svg/icons/input-hesitation.svg +++ b/frontend/app/svg/icons/input-hesitation.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/app/svg/icons/no-metrics-chart.svg b/frontend/app/svg/icons/no-metrics-chart.svg index 74c3b7b2d..820beed26 100644 --- a/frontend/app/svg/icons/no-metrics-chart.svg +++ b/frontend/app/svg/icons/no-metrics-chart.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/app/svg/icons/pointer-sessions-search.svg b/frontend/app/svg/icons/pointer-sessions-search.svg index 56e15a190..f7b1bb3f4 100644 --- a/frontend/app/svg/icons/pointer-sessions-search.svg +++ b/frontend/app/svg/icons/pointer-sessions-search.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/app/svg/icons/pulse.svg b/frontend/app/svg/icons/pulse.svg index 5075d1cab..8855fd1f4 100644 --- a/frontend/app/svg/icons/pulse.svg +++ b/frontend/app/svg/icons/pulse.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/app/svg/icons/question-lg.svg b/frontend/app/svg/icons/question-lg.svg index 8a6e3c642..71e60e03d 100644 --- a/frontend/app/svg/icons/question-lg.svg +++ b/frontend/app/svg/icons/question-lg.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/app/svg/icons/sleep.svg b/frontend/app/svg/icons/sleep.svg index 81e416cfe..b70368c23 100644 --- a/frontend/app/svg/icons/sleep.svg +++ b/frontend/app/svg/icons/sleep.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/app/svg/icons/stop-record-circle.svg b/frontend/app/svg/icons/stop-record-circle.svg index c12c7ef2b..d89716a64 100644 --- a/frontend/app/svg/icons/stop-record-circle.svg +++ b/frontend/app/svg/icons/stop-record-circle.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/app/svg/icons/toggles.svg b/frontend/app/svg/icons/toggles.svg index 149614309..f5396298a 100644 --- a/frontend/app/svg/icons/toggles.svg +++ b/frontend/app/svg/icons/toggles.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + diff --git a/frontend/app/svg/icons/web-vitals.svg b/frontend/app/svg/icons/web-vitals.svg index a10a828fd..44e15619b 100644 --- a/frontend/app/svg/icons/web-vitals.svg +++ b/frontend/app/svg/icons/web-vitals.svg @@ -1,3 +1,4 @@ - + diff --git a/frontend/scripts/icons.ts b/frontend/scripts/icons.ts index 3a2f9808c..1862bf251 100644 --- a/frontend/scripts/icons.ts +++ b/frontend/scripts/icons.ts @@ -1,72 +1,72 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const { optimize } = require('svgo'); const fs = require('fs'); -const { collectFilenames } = require('./fs'); +const { collectFilenames } = require('./fs'); const svgRE = /\.svg$/; const ICONS_DIRNAME = 'app/svg/icons'; const UI_DIRNAME = 'app/components/ui'; const icons = collectFilenames(ICONS_DIRNAME, n => svgRE.test(n)); const basePlugins = { - plugins: [ - // { name: 'preset-default' }, - { - name: 'removeAttrs', - params: { - attrs: ['fill-rule', 'clip-rule', 'fill', 'class'], - }, - }, - 'removeTitle', - 'removeComments', - 'removeXMLProcInst', - 'removeXMLNS', - 'mergeStyles', - 'inlineStyles', - 'removeStyleElement', - ] -} + plugins: [ + // { name: 'preset-default' }, + { + name: 'removeAttrs', + params: { + attrs: ['fill-rule', 'clip-rule', 'fill', 'class'] + } + }, + 'removeTitle', + 'removeComments', + 'removeXMLProcInst', + 'removeXMLNS', + 'mergeStyles', + 'inlineStyles', + 'removeStyleElement' + ] +}; const plugins = (removeFill = true) => { - return { - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - inlineStyles: { - onlyMatchedOnce: false, - }, - }, - }, - }, - { - name: 'removeAttrs', - params: { - attrs: ['xml', 'class' ,'style', 'data-name', 'dataName', 'svg:width', 'svg:height', 'fill-rule', removeFill ? 'svg:fill' : ''], - } - }, - { - name: 'addAttributesToSVGElement', - params: { - attributes: [ "width={ `${ width }px` }", "height={ `${ height }px` }", !removeFill ? "fill={ `${ fill }` }" : '' ], - } - }, - { name: 'removeXMLNS' }, - // { name: 'replaceDashes', params: { - // type: 'perItem', - // fn: (item) => { - // item.eachAttr(attr => { - // attr.name = attr.name.replace(/-([a-z])/g, gr => gr[1].toUpperCase()) - // }) - // } - // } }, + return { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + inlineStyles: { + onlyMatchedOnce: false + } + } + } + }, + { + name: 'removeAttrs', + params: { + attrs: ['xml', 'class', 'style', 'data-name', 'dataName', 'svg:width', 'svg:height', 'fill-rule', 'clip-path'] + } + }, + { + name: 'addAttributesToSVGElement', + params: { + attributes: ['width={ `${ width }px` }', 'height={ `${ height }px` }', !removeFill ? 'fill={ `${ fill }` }' : ''] + } + }, + { name: 'removeXMLNS' } + // { name: 'replaceDashes', params: { + // type: 'perItem', + // fn: (item) => { + // item.eachAttr(attr => { + // attr.name = attr.name.replace(/-([a-z])/g, gr => gr[1].toUpperCase()) + // }) + // } + // } }, - ] - } - } + ] + }; +}; fs.writeFileSync(`${UI_DIRNAME}/SVG.tsx`, ` import React from 'react'; -export type IconNames = ${icons.map((icon) => "'"+ icon.slice(0, -4) + "'").join(' | ')}; +export type IconNames = ${icons.map((icon) => '\'' + icon.slice(0, -4) + '\'').join(' | ')}; interface Props { name: IconNames; @@ -81,21 +81,20 @@ const SVG = (props: Props) => { const { name, size = 14, width = size, height = size, fill = '' } = props; switch (name) { ${icons.map(icon => { - const svg = fs.readFileSync(`${ICONS_DIRNAME}/${icon}`, 'utf-8'); - const canOptimize = !icon.includes('integrations'); - const { data } = optimize(svg, plugins(canOptimize)); - return ` case '${icon.slice(0, -4)}': return ${data.replace(/xlink\:href/g, 'xlinkHref') + const svg = fs.readFileSync(`${ICONS_DIRNAME}/${icon}`, 'utf-8'); + const canOptimize = !icon.includes('integrations'); + const { data } = optimize(svg, plugins(canOptimize)); + return ` case '${icon.slice(0, -4)}': return ${data.replace(/xlink\:href/g, 'xlinkHref') .replace(/xmlns\:xlink/g, 'xmlnsXlink') .replace(/clip\-path/g, 'clipPath') .replace(/clip\-rule/g, 'clipRule') // hack to keep fill rule for some icons like stop recording square .replace(/clipRule="evenoddCustomFill"/g, 'clipRule="evenodd" fillRule="evenodd"') - .replace(/fill-rule/g, 'fillRule') .replace(/fill-opacity/g, 'fillOpacity') .replace(/stop-color/g, 'stopColor') .replace(/xml:space="preserve"/g, '')};`; - }) +}) .join('\n')} default: return ; @@ -105,6 +104,6 @@ default: } SVG.displayName = 'SVG'; export default SVG; -`) - // }) - // .catch(console.error); +`); +// }) +// .catch(console.error);