327 lines
15 KiB
TypeScript
327 lines
15 KiB
TypeScript
/**
|
|
* Filled/Shape-style icons for Channel Strategy & Content Calendar.
|
|
* Soft pastel colors, no outlines — all shapes use fill only.
|
|
*/
|
|
|
|
interface IconProps {
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function YoutubeFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="2" y="4" width="20" height="16" rx="4" fill="currentColor" opacity="0.25" />
|
|
<path d="M10 8.5v7l6-3.5-6-3.5z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function InstagramFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="2" y="2" width="20" height="20" rx="6" fill="currentColor" opacity="0.25" />
|
|
<circle cx="12" cy="12" r="4.5" fill="currentColor" />
|
|
<circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function FacebookFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="2" y="2" width="20" height="20" rx="6" fill="currentColor" opacity="0.25" />
|
|
<path d="M15.5 3.5H13.5C11.29 3.5 9.5 5.29 9.5 7.5V9.5H7.5V12.5H9.5V20.5H12.5V12.5H14.5L15.5 9.5H12.5V7.5C12.5 7.22 12.72 7 13 7H15.5V3.5Z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function GlobeFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.2" />
|
|
<ellipse cx="12" cy="12" rx="4" ry="10" fill="currentColor" opacity="0.35" />
|
|
<line x1="2" y1="12" x2="22" y2="12" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
|
|
<line x1="12" y1="2" x2="12" y2="22" stroke="currentColor" strokeWidth="1.5" opacity="0.3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function VideoFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="1" y="5" width="15" height="14" rx="3" fill="currentColor" opacity="0.25" />
|
|
<path d="M16 9.5L22 6.5V17.5L16 14.5V9.5Z" fill="currentColor" />
|
|
<rect x="1" y="5" width="15" height="14" rx="3" fill="currentColor" opacity="0.5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function MessageFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M4 4H20C21.1 4 22 4.9 22 6V16C22 17.1 21.1 18 20 18H6L2 22V6C2 4.9 2.9 4 4 4Z" fill="currentColor" opacity="0.3" />
|
|
<path d="M4 4H20C21.1 4 22 4.9 22 6V16C22 17.1 21.1 18 20 18H6L2 22V6C2 4.9 2.9 4 4 4Z" fill="currentColor" opacity="0.4" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CalendarFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="3" y="4" width="18" height="18" rx="3" fill="currentColor" opacity="0.25" />
|
|
<rect x="3" y="4" width="18" height="6" rx="3" fill="currentColor" opacity="0.5" />
|
|
<circle cx="8" cy="15" r="1.2" fill="currentColor" />
|
|
<circle cx="12" cy="15" r="1.2" fill="currentColor" />
|
|
<circle cx="16" cy="15" r="1.2" fill="currentColor" />
|
|
<line x1="8" y1="2" x2="8" y2="5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
|
<line x1="16" y1="2" x2="16" y2="5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function FileTextFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M6 2H14L20 8V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V4C4 2.9 4.9 2 6 2Z" fill="currentColor" opacity="0.25" />
|
|
<path d="M14 2L20 8H16C14.9 8 14 7.1 14 6V2Z" fill="currentColor" opacity="0.5" />
|
|
<rect x="8" y="12" width="8" height="1.5" rx="0.75" fill="currentColor" />
|
|
<rect x="8" y="16" width="5" height="1.5" rx="0.75" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function ShareFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<circle cx="18" cy="5" r="3.5" fill="currentColor" opacity="0.4" />
|
|
<circle cx="6" cy="12" r="3.5" fill="currentColor" opacity="0.4" />
|
|
<circle cx="18" cy="19" r="3.5" fill="currentColor" opacity="0.4" />
|
|
<line x1="9" y1="10.5" x2="15" y2="6.5" stroke="currentColor" strokeWidth="2" opacity="0.3" />
|
|
<line x1="9" y1="13.5" x2="15" y2="17.5" stroke="currentColor" strokeWidth="2" opacity="0.3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function MegaphoneFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M19 3L8 8H4C2.9 8 2 8.9 2 10V14C2 15.1 2.9 16 4 16H5L7 21H10L8 16L19 21V3Z" fill="currentColor" opacity="0.35" />
|
|
<path d="M21 10C22.1 10 23 10.9 23 12C23 13.1 22.1 14 21 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function TiktokFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="2" y="2" width="20" height="20" rx="6" fill="currentColor" opacity="0.25" />
|
|
<path d="M16.5 4.5V12.5C16.5 15.26 14.26 17.5 11.5 17.5C8.74 17.5 6.5 15.26 6.5 12.5C6.5 9.74 8.74 7.5 11.5 7.5V10C10.12 10 9 11.12 9 12.5C9 13.88 10.12 15 11.5 15C12.88 15 14 13.88 14 12.5V4.5H16.5Z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function MusicFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<circle cx="7" cy="17" r="3" fill="currentColor" opacity="0.25" />
|
|
<circle cx="17" cy="15" r="3" fill="currentColor" opacity="0.25" />
|
|
<circle cx="7" cy="17" r="2" fill="currentColor" />
|
|
<circle cx="17" cy="15" r="2" fill="currentColor" />
|
|
<path d="M9 17V7L19 5V15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
|
<rect x="9" y="5" width="10" height="2" rx="1" fill="currentColor" opacity="0.4" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/* ─── Dashboard / Utility Icons ─── */
|
|
|
|
export function ShieldFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M12 2L3 7V12C3 17.5 6.8 22.7 12 24C17.2 22.7 21 17.5 21 12V7L12 2Z" fill="currentColor" opacity="0.25" />
|
|
<path d="M12 2L3 7V12C3 17.5 6.8 22.7 12 24C17.2 22.7 21 17.5 21 12V7L12 2Z" fill="currentColor" opacity="0.3" />
|
|
<path d="M10 14L8.5 12.5L7.5 13.5L10 16L16.5 9.5L15.5 8.5L10 14Z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function DatabaseFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<ellipse cx="12" cy="6" rx="8" ry="3" fill="currentColor" opacity="0.35" />
|
|
<path d="M4 6V12C4 13.66 7.58 15 12 15C16.42 15 20 13.66 20 12V6" fill="currentColor" opacity="0.25" />
|
|
<path d="M4 12V18C4 19.66 7.58 21 12 21C16.42 21 20 19.66 20 18V12" fill="currentColor" opacity="0.35" />
|
|
<ellipse cx="12" cy="18" rx="8" ry="3" fill="currentColor" opacity="0.5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function ServerFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="3" y="2" width="18" height="8" rx="2" fill="currentColor" opacity="0.3" />
|
|
<rect x="3" y="14" width="18" height="8" rx="2" fill="currentColor" opacity="0.3" />
|
|
<circle cx="7" cy="6" r="1.5" fill="currentColor" />
|
|
<circle cx="7" cy="18" r="1.5" fill="currentColor" />
|
|
<rect x="11" y="5" width="6" height="2" rx="1" fill="currentColor" opacity="0.5" />
|
|
<rect x="11" y="17" width="6" height="2" rx="1" fill="currentColor" opacity="0.5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function BoltFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M13 2L4 14H11L10 22L20 10H13L13 2Z" fill="currentColor" opacity="0.25" />
|
|
<path d="M13 2L4 14H11L10 22L20 10H13L13 2Z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function EyeFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5Z" fill="currentColor" opacity="0.2" />
|
|
<circle cx="12" cy="12" r="4" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function EyeOffFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5Z" fill="currentColor" opacity="0.15" />
|
|
<circle cx="12" cy="12" r="4" fill="currentColor" opacity="0.3" />
|
|
<line x1="4" y1="4" x2="20" y2="20" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CopyFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="8" y="8" width="12" height="14" rx="2" fill="currentColor" opacity="0.25" />
|
|
<rect x="4" y="2" width="12" height="14" rx="2" fill="currentColor" opacity="0.5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CheckFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.25" />
|
|
<path d="M8 12L11 15L16 9" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CrossFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.25" />
|
|
<path d="M8 8L16 16M16 8L8 16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function WarningFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<path d="M12 2L1 21H23L12 2Z" fill="currentColor" opacity="0.25" />
|
|
<rect x="11" y="9" width="2" height="6" rx="1" fill="currentColor" />
|
|
<circle cx="12" cy="18" r="1.2" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function RefreshFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<circle cx="12" cy="12" r="9" fill="currentColor" opacity="0.15" />
|
|
<path d="M17.65 6.35A7.95 7.95 0 0012 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function FlowFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="2" y="3" width="6" height="6" rx="1.5" fill="currentColor" opacity="0.35" />
|
|
<rect x="9" y="9" width="6" height="6" rx="1.5" fill="currentColor" opacity="0.5" />
|
|
<rect x="16" y="15" width="6" height="6" rx="1.5" fill="currentColor" />
|
|
<path d="M8 6H9.5C10.33 6 11 6.67 11 7.5V9" stroke="currentColor" strokeWidth="1.5" opacity="0.4" />
|
|
<path d="M15 12H16.5C17.33 12 18 12.67 18 13.5V15" stroke="currentColor" strokeWidth="1.5" opacity="0.4" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CoinFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.25" />
|
|
<circle cx="12" cy="12" r="7" fill="currentColor" opacity="0.35" />
|
|
<text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="bold" fill="currentColor">$</text>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function LinkExternalFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="3" y="5" width="14" height="14" rx="2" fill="currentColor" opacity="0.2" />
|
|
<path d="M14 3H21V10" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M21 3L10 14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* InfinityLoopFilled — Infinite Marketing loop icon.
|
|
* HubSpot-style infinity loop with gradient shading.
|
|
* Horizontal aspect ratio, scaled to match text cap-height.
|
|
*/
|
|
export function DownloadFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<rect x="3" y="16" width="18" height="5" rx="1.5" fill="currentColor" opacity="0.25" />
|
|
<path d="M12 3v10M8 10l4 4 4-4" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function RocketFilled({ size = 20, className = '' }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
|
|
<ellipse cx="12" cy="9" rx="5" ry="7" fill="currentColor" opacity="0.25" />
|
|
<path d="M12 2C9 2 6 5 6 9c0 3 1.5 5.5 3 7h6c1.5-1.5 3-4 3-7 0-4-3-7-6-7z" fill="currentColor" />
|
|
<path d="M9 16l-2 4h10l-2-4" fill="currentColor" opacity="0.4" />
|
|
<circle cx="12" cy="9" r="2" fill="white" opacity="0.7" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function PrismFilled({ size = 20, className = '' }: IconProps) {
|
|
const w = Math.round(size * 1.6);
|
|
const h = size;
|
|
const id = `inf-grad-${size}`;
|
|
return (
|
|
<svg width={w} height={h} viewBox="0 0 28 20" fill="none" className={className}>
|
|
<defs>
|
|
<linearGradient id={id} x1="0" y1="0" x2="28" y2="20" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="currentColor" stopOpacity="0.9" />
|
|
<stop offset="45%" stopColor="currentColor" stopOpacity="0.55" />
|
|
<stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
d="M2,10 C2,4 8,4 14,10 C20,16 26,16 26,10 C26,4 20,4 14,10 C8,16 2,16 2,10Z"
|
|
stroke={`url(#${id})`}
|
|
strokeWidth="2.8"
|
|
strokeLinejoin="round"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|