Skip to content

Commit

Permalink
feat: icons-variant cleanup code
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabyzif
gabyzif committed Aug 5, 2024
1 parent 54dfc77 commit bf83485
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 69 deletions.
10 changes: 5 additions & 5 deletions src/components/general/Icon/Icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { Icons } from 'src/constants/Icons'
import { IconOptions, IconVariant, IconNames } from 'src/types/iconTypes'
import type { IconOptions, IconVariant, IconNames } from 'src/types/icons'
import './icon.css'

type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
Expand All @@ -25,14 +25,14 @@ export interface IIconProps {
}

export const Icon: React.FC<IIconProps> = ({ name, color = 'default', size = 'lg', variant }) => {
const iconVariants = Icons[name] as IconOptions
const iconVariants: IconOptions = Icons[name]

if (iconVariants?.deprecated) {
console.warn(`Icon with name "${name}" is deprecated. Please use "predictions" instead.`)
console.warn(`Icon with name "${name}" is deprecated. Please use ${iconVariants?.deprecated} instead.`)
}

const iconVariant = variant || iconVariants.default
const IconComponent = iconVariants[iconVariant] || iconVariants[iconVariants.default]
const iconVariant = variant ?? iconVariants.default
const IconComponent = iconVariants[iconVariant] ?? iconVariants[iconVariants.default]

if (!IconComponent) {
console.error(`Icon with name "${name}" and variant "${iconVariant}" not found.`)
Expand Down
130 changes: 66 additions & 64 deletions src/constants/Icons.ts
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,69 @@
import { type IconOptions, type IconNames } from 'src/types/iconTypes'
import { type IconOptions, type IconNames } from 'src/types/icons'

import AddIcon from 'src/assets/svg/add.svg?react'
import AlicornIcon from 'src/assets/svg/alicorn.svg?react'
import AnalyticsIconDt from 'src/assets/svg/mp_pm_dt_analytics.svg?react'
import C360IconDt from 'src/assets/svg/mp_pm_dt_c360.svg?react'
import CatalogIcon from 'src/assets/svg/mp_pm_lt_catalog.svg?react'
import ChartColumnIcon from 'src/assets/svg/chart-column.svg?react'
import ChartLineIcon from 'src/assets/svg/chart-line.svg?react'
import CheckIcon from 'src/assets/svg/check.svg?react'
import CircleNodesIcon from 'src/assets/svg/circle-nodes.svg?react'
import CloudIcon from 'src/assets/svg/cloud.svg?react'
import ConnectionsIcon from 'src/assets/svg/connections.svg?react'
import DataPlatformIconDt from 'src/assets/svg/mp_pm_dt_data-platform.svg?react'
import DatabaseIcon from 'src/assets/svg/database.svg?react'
import DsrIcon from 'src/assets/svg/mp_pm_lt_dsr.svg?react'
import EmptyIcon from 'src/assets/svg/empty.svg?react'
import EnrichmentIcon from 'src/assets/svg/mp_pm_lt_enrichment.svg?react'
import EventAttributeIcon from 'src/assets/svg/event-attribute.svg?react'
import EventIcon from 'src/assets/svg/event.svg?react'
import FitToScreen from 'src/assets/svg/mp_act_lt_fit-to-screen.svg?react'
import FolderClosedIcon from 'src/assets/svg/folder-closed.svg?react'
import ForwardingIcon from 'src/assets/svg/mp_pm_lt_forwarding.svg?react'
import GearIcon from 'src/assets/svg/gear.svg?react'
import GridIcon from 'src/assets/svg/grid.svg?react'
import HeartIcon from 'src/assets/svg/heart.svg?react'
import HelpIcon from 'src/assets/svg/help.svg?react'
import IdentityIcon from 'src/assets/svg/mp_pm_lt_identity.svg?react'
import JumpToIcon from 'src/assets/svg/mp_act_lt_jump-to.svg?react'
import LightBulbIcon from 'src/assets/svg/lightbulb.svg?react'
import LiveStreamIcon from 'src/assets/svg/mp_pm_lt_live-stream.svg?react'
import PaywallIcon from 'src/assets/svg/paywall.svg?react'
import MessageQuestionIcon from 'src/assets/svg/message-question.svg?react'
import MpLogoIcon from 'src/assets/svg/mpLogo.svg?react'
import ObservabilityIcon from 'src/assets/svg/mp_pm_lt_observability.svg?react'
import OversightIconDt from 'src/assets/svg/mp_pm_dt_oversight.svg?react'
import PredictionsIcon from 'src/assets/svg/mp_pm_lt_predictions.svg?react'
import PredictionsIconDt from 'src/assets/svg/mp_pm_dt_predictions.svg?react'
import RemoveIcon from 'src/assets/svg/remove.svg?react'
import SearchIcon from 'src/assets/svg/search.svg?react'
import SegmentationIconDt from 'src/assets/svg/mp_pm_dt_segmentation.svg?react'
import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react'
import SignoutIcon from 'src/assets/svg/signout.svg?react'
import SplitIcon from 'src/assets/svg/split.svg?react'
import SystemAlertsIcon from 'src/assets/svg/mp_pm_lt_system-alerts.svg?react'
import TransformationsIcon from 'src/assets/svg/mp_pm_lt_transformations.svg?react'
import UploadIcon from 'src/assets/svg/mp_act_it_upload.svg?react'
import UserAttributeIcon from 'src/assets/svg/user-attribute.svg?react'
import UserProfilesIcon from 'src/assets/svg/mp_pm_lt_userprofiles.svg?react'
import UsersIcon from 'src/assets/svg/mp_info_lt_users.svg?react'
import WrenchIcon from 'src/assets/svg/wrench.svg?react'
import ZoomIn from 'src/assets/svg/mp_act_lt_zoom-in.svg?react'
import ZoomOut from 'src/assets/svg/mp_act_lt_zoom-out.svg?react'
import PremiumIcon from 'src/assets/svg/mp_info_lt_premium.svg?react'
import ConversionIcon from 'src/assets/svg/mp_info_lt_conversion.svg?react'
import HelpVideoIcon from 'src/assets/svg/mp_info_lt_help-video.svg?react'
import NextIcon from 'src/assets/svg/mp_act_lt_next.svg?react'
import OpenTabIcon from 'src/assets/svg/mp_act_lt_open-tab.svg?react'
import PreviousIcon from 'src/assets/svg/mp_act_lt_previous.svg?react'
import DirectoryIcon from 'src/assets/svg/mp_pm_lt_directory.svg?react'
import LockIcon from 'src/assets/svg/mp_act_lt_lock.svg?react'
import UnlockIcon from 'src/assets/svg/mp_act_lt_unlock.svg?react'
import NotificationIcon from 'src/assets/svg/mp_pm_lt_notification.svg?react'
import PremiumIconDt from 'src/assets/svg/mp_info_dt_premium.svg?react'
import {
AddIcon,
AlicornIcon,
AnalyticsIconDt,
C360IconDt,
CatalogIcon,
ChartColumnIcon,
ChartLineIcon,
CheckIcon,
CircleNodesIcon,
CloudIcon,
ConnectionsIcon,
DataPlatformIconDt,
DatabaseIcon,
DsrIcon,
EmptyIcon,
EnrichmentIcon,
EventAttributeIcon,
EventIcon,
FitToScreen,
FolderClosedIcon,
ForwardingIcon,
GearIcon,
GridIcon,
HeartIcon,
HelpIcon,
HelpVideoIcon,
IdentityIcon,
JumpToIcon,
LightBulbIcon,
LiveStreamIcon,
PaywallIcon,
MessageQuestionIcon,
MpLogoIcon,
ObservabilityIcon,
OversightIconDt,
PredictionsIconDt,
PredictionsIcon,
RemoveIcon,
SearchIcon,
SegmentationIconDt,
ShieldKeyholeIcon,
SignoutIcon,
SplitIcon,
SystemAlertsIcon,
TransformationsIcon,
UploadIcon,
UserAttributeIcon,
UserProfilesIcon,
UsersIcon,
WrenchIcon,
ZoomIn,
ZoomOut,
OpenTabIcon,
ConversionIcon,
PremiumIcon,
NextIcon,
PreviousIcon,
DirectoryIcon,
LockIcon,
UnlockIcon,
NotificationIcon,
PremiumIconDt,
} from 'src/components/icons'

export const Icons: Record<IconNames, IconOptions> = {
add: {
Expand Down Expand Up @@ -229,7 +231,7 @@ export const Icons: Record<IconNames, IconOptions> = {
light: PredictionsIcon,
'duo-tone': PredictionsIconDt,
default: 'light',
deprecated: true,
deprecated: 'predictions',
},
predictions: {
light: PredictionsIcon,
Expand Down

0 comments on commit bf83485

Please sign in to comment.