chore(frontend): Kill @ant-design/icons

.eslintrc.js

@@ -113,11 +113,7 @@ 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/CardMeta.tsx

@@ -1,10 +1,13 @@
 import './CardMeta.scss'
 
+import { IconPieChart } from '@posthog/icons'
 import clsx from 'clsx'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { IconRefresh, IconSubtitles, IconSubtitlesOff } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import React from 'react'
 import { Transition } from 'react-transition-group'
 
 import { InsightColor } from '~/types'
@@ -28,7 +31,7 @@ export interface CardMetaProps extends Pick<React.HTMLAttributes<HTMLDivElement>
     metaDetails?: JSX.Element | null
     moreButtons?: JSX.Element | null
     topHeading?: JSX.Element | null
-    samplingNotice?: JSX.Element | null
+    samplingFactor?: number | null
 }
 
 export function CardMeta({
@@ -44,7 +47,7 @@ export function CardMeta({
     areDetailsShown,
     setAreDetailsShown,
     className,
-    samplingNotice,
+    samplingFactor,
 }: CardMetaProps): JSX.Element {
     const { ref: primaryRef, width: primaryWidth } = useResizeObserver()
     const { ref: detailsRef, height: detailsHeight } = useResizeObserver()
@@ -68,7 +71,20 @@ export function CardMeta({
                     )}
                 <div className="CardMeta__main">
                     <div className="CardMeta__top">
-                        <h5>{topHeading}</h5>
+                        <h5>
+                            {topHeading}
+                            {samplingFactor && samplingFactor < 1 && (
+                                <Tooltip
+                                    title={`Results calculated from ${100 * samplingFactor}% of users`}
+                                    placement="right"
+                                >
+                                    <IconPieChart
+                                        className="ml-1.5 text-base align-[-0.25em]"
+                                        style={{ color: 'var(--primary-3000-hover)' }}
+                                    />
+                                </Tooltip>
+                            )}
+                        </h5>
                         <div className="CardMeta__controls">
                             {showDetailsControls && setAreDetailsShown && (
                                 <LemonButton
@@ -88,7 +104,6 @@ export function CardMeta({
                                     disabledReason={refreshDisabledReason}
                                 />
                             )}
-                            {samplingNotice ? samplingNotice : null}
                             {showEditingControls && <More overlay={moreButtons} />}
                         </div>
                     </div>

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

@@ -1,5 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import { PieChartFilled } from '@ant-design/icons'
 import { useValues } from 'kea'
 import { CardMeta } from 'lib/components/Cards/CardMeta'
 import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
@@ -128,13 +126,7 @@ export function InsightMeta({
                 </>
             }
             metaDetails={<InsightDetails insight={insight} />}
-            samplingNotice={
-                samplingFactor && samplingFactor < 1 ? (
-                    <Tooltip title={`Results calculated from ${100 * samplingFactor}% of users`}>
-                        <PieChartFilled className="mr-2" style={{ color: 'var(--primary-3000-hover)' }} />
-                    </Tooltip>
-                ) : null
-            }
+            samplingFactor={samplingFactor}
             moreButtons={
                 <>
                     <>

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

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
-import { FundOutlined } from '@ant-design/icons'
+import { IconPulse } from '@posthog/icons'
 import { LemonSelect } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { insightLogic } from 'scenes/insights/insightLogic'
@@ -25,7 +24,8 @@ export function SmoothingFilter(): JSX.Element | null {
         label:
             value === smoothingIntervals ? (
                 <>
-                    <FundOutlined className="mr-1 text-muted" /> {label}
+                    <IconPulse className="mr-1.5 text-muted" />
+                    {label}
                 </>
             ) : (
                 label

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

@@ -1,8 +1,6 @@
 import './index.scss'
 
-// eslint-disable-next-line no-restricted-imports
-import { LaptopOutlined, ProjectOutlined } from '@ant-design/icons'
-import { IconGear } from '@posthog/icons'
+import { IconGear, IconHome, IconLaptop } from '@posthog/icons'
 import { LemonButton, LemonDivider, LemonDropdown, LemonDropdownProps } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -57,7 +55,7 @@ const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
             <div className="space-y-2">
                 <div className="TZLabelPopover__row">
                     <div>
-                        <LaptopOutlined />
+                        <IconLaptop />
                     </div>
                     <div>Your device</div>
                     <div>{shortTimeZone(undefined, time.toDate())}</div>
@@ -66,7 +64,7 @@ const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
                 {currentTeam && (
                     <div className="TZLabelPopover__row TZLabelPopover__row--muted">
                         <div>
-                            <ProjectOutlined />
+                            <IconHome />
                         </div>
                         <div>Project</div>
                         <div>{shortTimeZone(currentTeam.timezone, time.toDate())}</div>

frontend/src/queries/nodes/InsightViz/EditorFilters.tsx

@@ -289,7 +289,7 @@ export function EditorFilters({ query, showing, embedded }: EditorFiltersProps):
                 </div>
 
                 {shouldShowSessionAnalysisWarning ? (
-                    <LemonBanner type="info">
+                    <LemonBanner type="info" className="mt-2">
                         When using sessions and session properties, events without session IDs will be excluded from the
                         set of results.{' '}
                         <Link to="https://posthog.com/docs/user-guides/sessions">Learn more about sessions.</Link>

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

@@ -1,8 +1,14 @@
 import './EmptyStates.scss'
 
-// eslint-disable-next-line no-restricted-imports
-import { PlusCircleOutlined, ThunderboltFilled } from '@ant-design/icons'
-import { IconArchive, IconInfo, IconPlus, IconWarning } from '@posthog/icons'
+import {
+    IconArchive,
+    IconInfo,
+    IconPieChart,
+    IconPlus,
+    IconPlusSmall,
+    IconPlusSquare,
+    IconWarning,
+} from '@posthog/icons'
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { AnimationType } from 'lib/animations/animations'
@@ -69,7 +75,7 @@ function SamplingLink({ insightProps }: { insightProps: InsightLogicProps }): JS
                     })
                 }}
             >
-                <ThunderboltFilled className="mt-1" /> {suggestedSamplingPercentage}% sampling
+                <IconPieChart className="mt-1" /> {suggestedSamplingPercentage}% sampling
             </Link>
         </Tooltip>
     )
@@ -341,10 +347,10 @@ export function FunnelSingleStepState({ actionable = true }: FunnelSingleStepSta
         <div className="insight-empty-state funnels-empty-state">
             <div className="empty-state-inner">
                 <div className="illustration-main">
-                    <PlusCircleOutlined />
+                    <IconPlusSquare />
                 </div>
                 <h2 className="text-xl leading-tight funnels-empty-state__title">Add another step!</h2>
-                <p className="text-sm text-center text-balance">
+                <p className="mb-0 text-sm text-center text-balance">
                     You’re almost there! Funnels require at least two steps before calculating.
                     {actionable &&
                         ' Once you have two steps defined, additional changes will recalculate automatically.'}
@@ -480,7 +486,7 @@ export function SavedInsightsEmptyState(): JSX.Element {
                             <LemonButton
                                 type="primary"
                                 data-attr="add-insight-button-empty-state"
-                                icon={<PlusCircleOutlined />}
+                                icon={<IconPlusSmall />}
                                 className="add-insight-button"
                             >
                                 New insight

frontend/src/scenes/saved-insights/SavedInsights.scss

@@ -42,11 +42,6 @@
                 line-height: 1.7rem;
                 color: var(--muted);
             }
-
-            button.add-insight-button {
-                height: 50px;
-                padding: 0 3rem;
-            }
         }
     }
 }

package.json

@@ -66,7 +66,6 @@
         "mypy-baseline-sync": "mypy -p posthog | mypy-baseline sync"
     },
     "dependencies": {
-        "@ant-design/icons": "^4.7.0",
         "@babel/runtime": "^7.24.0",
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/modifiers": "^6.0.1",