data-source-icons
Use the correct Tabler icon for each HyperDX data source kind (Log, Trace, Session, Metric, PromQL). Use whenever adding or changing an icon that represents a source kind or a signal type — source selectors, side panels, cross-source actions like "View Trace", tabs, badges, breadcrumbs, or anywhere a log/trace/session/metric is depicted.
소스 정보
- 저장소
- hyperdxio/hyperdx
- 최근 소스 활동
- 2026년 8월 7일 12:12
- 감지된 SKILL.md 언어
- 영어
- 스타
- 9,970
- 포크
- 501
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- data-source-icons
- description
- Use the correct Tabler icon for each HyperDX data source kind (Log, Trace, Session, Metric, PromQL). Use whenever adding or changing an icon that represents a source kind or a signal type — source selectors, side panels, cross-source actions like "View Trace", tabs, badges, breadcrumbs, or anywhere a log/trace/session/metric is depicted.
# Data source icons
There is **one canonical icon per source kind**. The source of truth is
`SOURCE_KIND_ICONS` in
`packages/app/src/components/sourceSelectUtils.tsx`. Never invent a different
icon for a source kind (e.g. don't use `IconTimeline` for a trace) — always
match the table below so icons stay consistent across the app.
## Canonical mapping
| Source kind (`SourceKind`) | Tabler icon | Meaning |
| -------------------------- | ---------------- | ----------------------------- |
| `Log` | `IconLogs` | Logs |
| `Trace` | `IconConnection` | Traces / spans |
| `Session` | `IconDeviceLaptop` | Session replay / client sessions |
| `Metric` | `IconChartLine` | Metrics |
| `Promql` | `IconChartLine` | PromQL metrics (same as Metric) |
All imported from `@tabler/icons-react`.
## Rules
1. **Prefer the shared map.** When you need a source-kind icon in a context that
already has (or can accept) a `SourceKind`, use `SOURCE_KIND_ICONS[kind]`
from `sourceSelectUtils.tsx` rather than hardcoding an icon component.
2. **If you must hardcode** (e.g. a fixed "View Trace" action that always points
at a trace), import the exact icon from the table above — for a trace that is
`IconConnection`, not `IconTimeline`/`IconRoute`/etc.
3. **Sizing**: the shared map uses `size={16}`. Match the surrounding UI; small
inline buttons/badges commonly use `14`.
4. **Adding a new source kind**: update `SOURCE_KIND_ICONS` first, then update
this table so the two never drift.
## Examples
Cross-source "View Trace" action (fixed target → hardcode the trace icon):
```tsx
import { IconConnection } from '@tabler/icons-react';
<Button leftSection={<IconConnection size={14} />}>View Trace</Button>;
```
Dynamic, kind-driven icon (prefer the shared map):
```tsx
import { SOURCE_KIND_ICONS } from '@/components/sourceSelectUtils';
<span>{SOURCE_KIND_ICONS[source.kind]}</span>;
```
GitHub에서 보기