refactor(ui): deduplicate shared utilities and remove dead code

- Extract mix() color helper to src/utils/colorMix.ts (was duplicated in DocCard, PathCard, PathwayRow)
- Extract CUI icon map to src/components/docs/icons/cuiMap.ts (was duplicated in DocCard, ChallengeGrid)
- Delete 11 unused custom SVG icon files in components/docs/icons/
- Rename RunningStrip ext prop to external, consistent with QuickStrip API
- Replace RunningStrip inline SVG arrow with CIcon cilArrowRight

Author: ziracmo

crowdsec-docs/src/components/docs/ChallengeGrid/index.tsx

@@ -1,30 +1,6 @@
-import {
-	cilBarChart,
-	cilBell,
-	cilCompass,
-	cilGlobeAlt,
-	cilLayers,
-	cilLockLocked,
-	cilRss,
-	cilSearch,
-	cilShieldAlt,
-	cilSpeedometer,
-} from "@coreui/icons";
 import { CIcon } from "@coreui/icons-react";
 import React from "react";
-
-const CUI: Record<string, object> = {
-	search: cilSearch,
-	pulse: cilBarChart,
-	box: cilLayers,
-	shield: cilShieldAlt,
-	compass: cilCompass,
-	gauge: cilSpeedometer,
-	globe: cilGlobeAlt,
-	lock: cilLockLocked,
-	bell: cilBell,
-	feed: cilRss,
-};
+import { CUI } from "../icons/cuiMap";
 
 export type Challenge = {
 	iconName?: string;

crowdsec-docs/src/components/docs/DocCard/index.tsx

@@ -1,55 +1,8 @@
-import {
-	cilArrowRight,
-	cilBarChart,
-	cilBell,
-	cilBook,
-	cilBriefcase,
-	cilCheckCircle,
-	cilCode,
-	cilCompass,
-	cilGlobeAlt,
-	cilInfo,
-	cilLayers,
-	cilLockLocked,
-	cilNotes,
-	cilPeople,
-	cilPuzzle,
-	cilRss,
-	cilSearch,
-	cilShieldAlt,
-	cilSpeedometer,
-	cilStar,
-	cilTerminal,
-	cilWarning,
-} from "@coreui/icons";
+import { cilArrowRight } from "@coreui/icons";
 import { CIcon } from "@coreui/icons-react";
 import React from "react";
-
-/* Shared icon set — use CoreUI icons throughout */
-const CUI: Record<string, object> = {
-	search: cilSearch,
-	key: cilLockLocked,
-	terminal: cilTerminal,
-	globe: cilGlobeAlt,
-	shield: cilShieldAlt,
-	feed: cilRss,
-	compass: cilCompass,
-	book: cilBook,
-	plug: cilPuzzle,
-	alert: cilWarning,
-	gauge: cilSpeedometer,
-	lock: cilLockLocked,
-	box: cilLayers,
-	pulse: cilBarChart,
-	users: cilPeople,
-	bell: cilBell,
-	check: cilCheckCircle,
-	code: cilCode,
-	star: cilStar,
-	info: cilInfo,
-	notes: cilNotes,
-	briefcase: cilBriefcase,
-};
+import { mix } from "../../../utils/colorMix";
+import { CUI } from "../icons/cuiMap";
 
 function renderIcon(name: string) {
 	const icon = CUI[name];
@@ -78,8 +31,6 @@ export type DocCardProps = {
 	children?: React.ReactNode;
 };
 
-const mix = (c: string, pct: number) => `color-mix(in srgb, ${c} ${pct}%, transparent)`;
-
 function ExternalArrow() {
 	return (
 		<CIcon

crowdsec-docs/src/components/docs/PathCard/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { mix } from "../../../utils/colorMix";
 
 type Props = {
 	eyebrow?: string;
@@ -13,7 +14,6 @@ type Props = {
 };
 
 /* color-mix() helper so CSS vars like var(--cs-orange) can be used with opacity */
-const mix = (c: string, pct: number) => `color-mix(in srgb, ${c} ${pct}%, transparent)`;
 
 export default function PathCard({ eyebrow, color, icon, title, desc, tag, tags = [], audience, href }: Props) {
 	const [hover, setHover] = useState(false);

crowdsec-docs/src/components/docs/PathwayRow/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { mix } from "../../../utils/colorMix";
 
 export type Step = {
 	title: string;
@@ -36,8 +37,6 @@ function ArrowIcon() {
 	);
 }
 
-const mix = (c: string, pct: number) => `color-mix(in srgb, ${c} ${pct}%, transparent)`;
-
 const HINT_STYLE: Record<string, React.CSSProperties> = {
 	RECOMMENDED: {
 		background: "color-mix(in srgb, var(--cs-teal) 15%, transparent)",

crowdsec-docs/src/components/docs/RunningStrip/index.tsx

@@ -1,6 +1,8 @@
+import { cilArrowRight } from "@coreui/icons";
+import { CIcon } from "@coreui/icons-react";
 import React from "react";
 
-type Link = { icon?: React.ReactNode; label: string; href: string; color?: string; ext?: boolean };
+type Link = { icon?: React.ReactNode; label: string; href: string; color?: string; external?: boolean };
 
 type Props = {
 	label?: string;
@@ -68,21 +70,12 @@ export default function RunningStrip({ label = "Already running CrowdSec?", link
 					>
 						{l.icon && <span style={{ color: l.color || "var(--cs-orange)", display: "flex", flexShrink: 0 }}>{l.icon}</span>}
 						{l.label}
-						{l.ext && (
-							<svg
-								width="11"
-								height="11"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth={1.6}
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								style={{ opacity: 0.5, flexShrink: 0, color: "var(--cs-ink-mute)" }}
+						{l.external && (
+							<CIcon
+								icon={cilArrowRight}
+								style={{ width: 11, height: 11, opacity: 0.5, flexShrink: 0, transform: "rotate(-45deg)" }}
 								aria-hidden="true"
-							>
-								<path d="M5 12h14M13 6l6 6-6 6" />
-							</svg>
+							/>
 						)}
 					</a>
 				))}