chore: stop people using new antd icons (#18494)

.eslintrc.js

@@ -82,6 +82,10 @@ module.exports = {
                         name: 'dayjs',
                         message: 'Do not directly import dayjs. Only import the dayjs exported from lib/dayjs.',
                     },
+                    {
+                        name: '@ant-design/icons',
+                        message: 'Please use icons from the @posthog/icons package instead',
+                    },
                 ],
             },
         ],

frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx

@@ -18,6 +18,7 @@ import { mathsLogic } from 'scenes/trends/mathsLogic'
 import { ExportButton } from 'lib/components/ExportButton/ExportButton'
 import { CardMeta } from 'lib/components/Cards/CardMeta'
 import { DashboardPrivilegeLevel } from 'lib/constants'
+// eslint-disable-next-line no-restricted-imports
 import { PieChartFilled } from '@ant-design/icons'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'

frontend/src/lib/components/CloseButton.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { CloseOutlined } from '@ant-design/icons'
 
 // TODO: Remove, but de-ant PropertyFilterButton and SelectGradientOverflow first

frontend/src/lib/components/ObjectTags/ObjectTags.tsx

@@ -1,6 +1,7 @@
 import { Tag, Select } from 'antd'
 import { colorForString } from 'lib/utils'
 import { CSSProperties, useMemo } from 'react'
+// eslint-disable-next-line no-restricted-imports
 import { SyncOutlined, CloseOutlined } from '@ant-design/icons'
 import { SelectGradientOverflow } from '../SelectGradientOverflow'
 import { useActions, useValues } from 'kea'

frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx

@@ -1,7 +1,6 @@
 import { useState, useCallback, Dispatch, SetStateAction } from 'react'
 import { Table, Popconfirm } from 'antd'
 import { useActions, useValues } from 'kea'
-import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { personalAPIKeysLogic } from './personalAPIKeysLogic'
 import { PersonalAPIKeyType } from '~/types'
 import { humanFriendlyDetailedTime } from 'lib/utils'
@@ -10,7 +9,7 @@ import { ColumnsType } from 'antd/lib/table'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonInput, LemonModal, Link } from '@posthog/lemon-ui'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { IconPlus } from 'lib/lemon-ui/icons'
+import { IconErrorOutline, IconPlus } from 'lib/lemon-ui/icons'
 
 function CreateKeyModal({
     isOpen,
@@ -88,7 +87,7 @@ function RowActionsCreator(
                 title={`Permanently delete key "${personalAPIKey.label}"?`}
                 okText="Delete Key"
                 okType="danger"
-                icon={<ExclamationCircleOutlined style={{ color: 'var(--danger)' }} />}
+                icon={<IconErrorOutline style={{ color: 'var(--danger)' }} />}
                 placement="left"
                 onConfirm={() => {
                     deleteKey(personalAPIKey)

frontend/src/lib/components/SelectGradientOverflow.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line no-restricted-imports
+import { LoadingOutlined } from '@ant-design/icons'
 import { ReactElement, RefObject, useEffect, useRef, useState } from 'react'
 import { ConfigProvider, Empty, Select, Tag } from 'antd'
 import { RefSelectProps, SelectProps } from 'antd/lib/select'
@@ -7,7 +9,6 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import './SelectGradientOverflow.scss'
 import { useValues } from 'kea'
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { LoadingOutlined } from '@ant-design/icons'
 
 interface DropdownGradientRendererProps {
     updateScrollGradient: () => void

frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { FundOutlined } from '@ant-design/icons'
 import { smoothingOptions } from './smoothings'
 import { useActions, useValues } from 'kea'

frontend/src/lib/components/TZLabel/index.tsx

@@ -1,14 +1,15 @@
 import './index.scss'
 import { useActions, useValues } from 'kea'
-import { ProjectOutlined, LaptopOutlined, GlobalOutlined } from '@ant-design/icons'
+// eslint-disable-next-line no-restricted-imports
+import { ProjectOutlined, LaptopOutlined } from '@ant-design/icons'
 import { humanFriendlyDetailedTime, shortTimeZone } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { teamLogic } from '../../../scenes/teamLogic'
 import { dayjs } from 'lib/dayjs'
 import clsx from 'clsx'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { LemonButton, LemonDivider, LemonDropdown, LemonDropdownProps } from '@posthog/lemon-ui'
-import { IconSettings } from 'lib/lemon-ui/icons'
+import { IconSettings, IconWeb } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 
 const BASE_OUTPUT_FORMAT = 'ddd, MMM D, YYYY h:mm A'
@@ -67,7 +68,7 @@ const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
                 {currentTeam?.timezone !== 'UTC' && (
                     <div className="TZLabelPopover__row">
                         <div>
-                            <GlobalOutlined /> UTC
+                            <IconWeb /> UTC
                         </div>
                         <div />
                         <div>{time.tz('UTC').format(DATE_OUTPUT_FORMAT)}</div>

frontend/src/scenes/PreflightCheck/PreflightCheck.tsx

@@ -1,5 +1,4 @@
 import { useValues, useActions } from 'kea'
-import { LoadingOutlined } from '@ant-design/icons'
 import { PreflightCheckStatus, PreflightItem, preflightLogic } from './preflightLogic'
 import './PreflightCheck.scss'
 import { capitalizeFirstLetter } from 'lib/utils'
@@ -18,7 +17,7 @@ import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { BridgePage } from 'lib/components/BridgePage/BridgePage'
-import { Link } from '@posthog/lemon-ui'
+import { Link, Spinner } from '@posthog/lemon-ui'
 
 export const scene: SceneExport = {
     component: PreflightCheck,
@@ -27,7 +26,7 @@ export const scene: SceneExport = {
 
 function PreflightCheckIcon({ status, loading }: { status: PreflightCheckStatus; loading?: boolean }): JSX.Element {
     if (loading) {
-        return <LoadingOutlined style={{ color: 'var(--primary)' }} />
+        return <Spinner textColored className="text-primary" />
     }
     if (status === 'validated') {
         return <IconCheckCircleOutline />

frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx

@@ -1,6 +1,7 @@
 import { useActions } from 'kea'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
 import { Card } from 'antd'
+// eslint-disable-next-line no-restricted-imports
 import { AppstoreAddOutlined } from '@ant-design/icons'
 
 export const NoDashboards = (): JSX.Element => {

frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx

@@ -1,4 +1,4 @@
-import { LemonButton, LemonTable, LemonTag } from '@posthog/lemon-ui'
+import { LemonButton, LemonTable, LemonTag, Spinner } from '@posthog/lemon-ui'
 import { PageHeader } from 'lib/components/PageHeader'
 import { SceneExport } from 'scenes/sceneTypes'
 import { dataWarehouseSettingsLogic } from './dataWarehouseSettingsLogic'
@@ -8,7 +8,6 @@ import SourceModal from '../external/SourceModal'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { More } from 'lib/lemon-ui/LemonButton/More'
-import { LoadingOutlined } from '@ant-design/icons'
 
 export const scene: SceneExport = {
     component: DataWarehouseSettingsScene,
@@ -89,7 +88,7 @@ export function DataWarehouseSettingsScene(): JSX.Element {
                                 <div className="flex flex-row justify-end">
                                     {sourceReloadingById[source.id] ? (
                                         <div>
-                                            <LoadingOutlined />
+                                            <Spinner />
                                         </div>
                                     ) : (
                                         <div>

frontend/src/scenes/experiments/Experiment.tsx

@@ -8,6 +8,7 @@ import { AvailableFeature, FunnelStep, InsightType } from '~/types'
 import './Experiment.scss'
 import { experimentLogic, ExperimentLogicProps } from './experimentLogic'
 import { IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
+// eslint-disable-next-line no-restricted-imports
 import { CloseOutlined } from '@ant-design/icons'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
 import { dayjs } from 'lib/dayjs'

frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx

@@ -1,4 +1,5 @@
 import { useActions, useValues } from 'kea'
+// eslint-disable-next-line no-restricted-imports
 import { PlusCircleOutlined, ThunderboltFilled } from '@ant-design/icons'
 import { IconErrorOutline, IconInfo, IconOpenInNew, IconPlus } from 'lib/lemon-ui/icons'
 import { entityFilterLogic } from 'scenes/insights/filters/ActionFilter/entityFilterLogic'

frontend/src/scenes/insights/filters/RetentionReferencePicker.tsx

@@ -1,4 +1,5 @@
 import { Select } from 'antd'
+// eslint-disable-next-line no-restricted-imports
 import { PercentageOutlined } from '@ant-design/icons'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { useActions, useValues } from 'kea'

frontend/src/scenes/insights/views/Funnels/FunnelCorrelationSkewWarning.tsx

@@ -4,6 +4,7 @@ import { Card } from 'antd'
 import { insightLogic } from 'scenes/insights/insightLogic'
 
 import { IconFeedback } from 'lib/lemon-ui/icons'
+// eslint-disable-next-line no-restricted-imports
 import { CloseOutlined } from '@ant-design/icons'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 

frontend/src/scenes/insights/views/Funnels/FunnelVizType.tsx

@@ -1,11 +1,13 @@
 import { useActions, useValues } from 'kea'
-import { ClockCircleOutlined, LineChartOutlined, FunnelPlotOutlined } from '@ant-design/icons'
+// eslint-disable-next-line no-restricted-imports
+import { ClockCircleOutlined, LineChartOutlined } from '@ant-design/icons'
 
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 
 import { FunnelVizType as VizType, EditorFilterProps } from '~/types'
 import { DropdownSelector } from 'lib/components/DropdownSelector/DropdownSelector'
 import { FunnelsFilter } from '~/queries/schema'
+import { IconFunnels } from '@posthog/icons'
 
 export function FunnelVizType({ insightProps }: Pick<EditorFilterProps, 'insightProps'>): JSX.Element | null {
     const { aggregationTargetLabel } = useValues(funnelDataLogic(insightProps))
@@ -19,7 +21,7 @@ export function FunnelVizType({ insightProps }: Pick<EditorFilterProps, 'insight
             key: VizType.Steps,
             label: 'Conversion steps',
             description: `Track ${aggregationTargetLabel.plural} progress between steps of the funnel`,
-            icon: <FunnelPlotOutlined />,
+            icon: <IconFunnels />,
         },
         {
             key: VizType.TimeToConvert,

frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.tsx

@@ -1,5 +1,6 @@
 import { useValues, useActions } from 'kea'
 import { Dropdown, Menu } from 'antd'
+// eslint-disable-next-line no-restricted-imports
 import { DownOutlined } from '@ant-design/icons'
 
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'

frontend/src/scenes/insights/views/Paths/PathStepPicker.tsx

@@ -1,5 +1,6 @@
 import { useActions, useValues } from 'kea'
 import { Select } from 'antd'
+// eslint-disable-next-line no-restricted-imports
 import { BarsOutlined } from '@ant-design/icons'
 import { ANTD_TOOLTIP_PLACEMENTS } from 'lib/utils'
 

frontend/src/scenes/persons/NewPropertyComponent.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Input, Radio } from 'antd'
+// eslint-disable-next-line no-restricted-imports
 import { SaveOutlined, StopOutlined, CheckOutlined } from '@ant-design/icons'
 import Modal from 'antd/lib/modal/Modal'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'

frontend/src/scenes/persons/PersonScene.tsx

@@ -1,4 +1,5 @@
 import { Dropdown, Menu, Tag } from 'antd'
+// eslint-disable-next-line no-restricted-imports
 import { DownOutlined } from '@ant-design/icons'
 import { useActions, useValues } from 'kea'
 import { personsLogic } from './personsLogic'

frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react'
-import { CheckOutlined } from '@ant-design/icons'
 import { Tooltip, Radio, InputNumber } from 'antd'
 import { ChildFunctionProps, Form } from 'kea-forms'
 import { Field } from 'lib/forms/Field'
@@ -16,6 +15,7 @@ import { formatDate, formatDateRange } from 'lib/utils'
 import { DatePicker } from 'lib/components/DatePicker'
 import { CodeEditor } from 'lib/components/CodeEditors'
 import { IconClose, IconPlayCircle, IconSettings } from 'lib/lemon-ui/icons'
+import { IconCheck } from '@posthog/icons'
 
 // keep in sync with plugin-server's export-historical-events.ts
 export const HISTORICAL_EXPORT_JOB_NAME = 'Export historical events'
@@ -126,7 +126,7 @@ function FieldInput({
                     onChange={(e) => onChange(e.target.value)}
                 >
                     <Radio.Button value={true} defaultChecked>
-                        <CheckOutlined /> True
+                        <IconCheck /> True
                     </Radio.Button>
                     <Radio.Button value={false}>
                         <IconClose /> False

frontend/src/scenes/plugins/tabs/apps/AppManagementView.tsx

@@ -1,14 +1,13 @@
 import { LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { IconCheckmark, IconCloudDownload, IconDelete, IconReplay } from 'lib/lemon-ui/icons'
+import { IconCheckmark, IconCloudDownload, IconDelete, IconReplay, IconWeb } from 'lib/lemon-ui/icons'
 import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { PluginTypeWithConfig, PluginRepositoryEntry, PluginInstallationType } from 'scenes/plugins/types'
 import { PluginType } from '~/types'
 import { PluginTags } from './components'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { Popconfirm } from 'antd'
-import { GlobalOutlined } from '@ant-design/icons'
 import { canGloballyManagePlugins } from 'scenes/plugins/access'
 import { userLogic } from 'scenes/userLogic'
 
@@ -111,7 +110,7 @@ export function AppManagementView({
                                 <LemonButton
                                     type="secondary"
                                     size="small"
-                                    icon={<GlobalOutlined />}
+                                    icon={<IconWeb />}
                                     onClick={() => patchPlugin(plugin.id, { is_global: true })}
                                 >
                                     Make global

frontend/src/scenes/project/Settings/TeamMembers.tsx

@@ -1,5 +1,6 @@
 import { useValues, useActions } from 'kea'
 import { MINIMUM_IMPLICIT_ACCESS_LEVEL, teamMembersLogic } from './teamMembersLogic'
+// eslint-disable-next-line no-restricted-imports
 import { CloseCircleOutlined, LogoutOutlined, CrownFilled } from '@ant-design/icons'
 import { humanFriendlyDetailedTime } from 'lib/utils'
 import { OrganizationMembershipLevel, TeamMembershipLevel } from 'lib/constants'