Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Dateien nach "frontend/src" hochladen

Browse Source
This commit is contained in:
Dicken
2026-05-25 23:29:25 +02:00
parent cccf4f4bb3
commit 91bd239587
3 changed files with 177 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
frontend/src/icons.jsx Normal file
View File

@@ -0,0 +1,139 @@
// ── Icon Library – stroke-basierte SVG Icons ──────────────────────────────────
// Verwendung: <Icon name="home" size={20} color="#4ecdc4" />
// Oder direkt: <HomeIcon size={20} color="#fff" />
const base = (path, size, color, sw = 1.75) => (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
{path}
</svg>
);
export const HomeIcon = ({size=20,color='currentColor',sw}) => base(<>
<path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9.5z"/>
<path d="M9 21V12h6v9"/>
</>, size, color, sw);
export const AppsIcon = ({size=20,color='currentColor',sw}) => base(<>
<rect x="3" y="3" width="7" height="7" rx="1"/>
<rect x="14" y="3" width="7" height="7" rx="1"/>
<rect x="3" y="14" width="7" height="7" rx="1"/>
<rect x="14" y="14" width="7" height="7" rx="1"/>
</>, size, color, sw);
export const CalculatorIcon = ({size=20,color='currentColor',sw}) => base(<>
<rect x="4" y="2" width="16" height="20" rx="2"/>
<line x1="8" y1="7" x2="16" y2="7"/>
<line x1="8" y1="12" x2="10" y2="12"/>
<line x1="14" y1="12" x2="16" y2="12"/>
<line x1="8" y1="17" x2="10" y2="17"/>
<line x1="14" y1="17" x2="16" y2="17"/>
</>, size, color, sw);
export const ArchiveIcon = ({size=20,color='currentColor',sw}) => base(<>
<rect x="2" y="3" width="20" height="4" rx="1"/>
<path d="M4 7v13a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7"/>
<line x1="9" y1="12" x2="15" y2="12"/>
</>, size, color, sw);
export const AdminIcon = ({size=20,color='currentColor',sw}) => base(<>
<circle cx="12" cy="12" r="3"/>
<path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</>, size, color, sw);
export const MoreIcon = ({size=20,color='currentColor',sw}) => base(<>
<circle cx="5" cy="12" r="1.2" fill={color}/>
<circle cx="12" cy="12" r="1.2" fill={color}/>
<circle cx="19" cy="12" r="1.2" fill={color}/>
</>, size, color, sw);
export const UserIcon = ({size=20,color='currentColor',sw}) => base(<>
<circle cx="12" cy="8" r="4"/>
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
</>, size, color, sw);
export const LogOutIcon = ({size=20,color='currentColor',sw}) => base(<>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</>, size, color, sw);
export const SearchIcon = ({size=20,color='currentColor',sw}) => base(<>
<circle cx="11" cy="11" r="7"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</>, size, color, sw);
export const PlusIcon = ({size=20,color='currentColor',sw}) => base(<>
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</>, size, color, sw);
export const XIcon = ({size=20,color='currentColor',sw}) => base(<>
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</>, size, color, sw);
export const CheckIcon = ({size=20,color='currentColor',sw}) => base(<>
<polyline points="20 6 9 17 4 12"/>
</>, size, color, sw);
export const EditIcon = ({size=20,color='currentColor',sw}) => base(<>
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
</>, size, color, sw);
export const TrashIcon = ({size=20,color='currentColor',sw}) => base(<>
<polyline points="3 6 5 6 21 6"/>
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
<path d="M10 11v6M14 11v6"/>
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
</>, size, color, sw);
export const DownloadIcon = ({size=20,color='currentColor',sw}) => base(<>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</>, size, color, sw);
export const UploadIcon = ({size=20,color='currentColor',sw}) => base(<>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</>, size, color, sw);
export const UpdateIcon = ({size=20,color='currentColor',sw}) => base(<>
<circle cx="12" cy="12" r="9"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>
</>, size, color, sw);
export const ChevronIcon = ({size=20,color='currentColor',sw,dir='right'}) => base(<>
{dir==='right' && <polyline points="9 18 15 12 9 6"/>}
{dir==='down' && <polyline points="6 9 12 15 18 9"/>}
</>, size, color, sw);
export const CameraIcon = ({size=20,color='currentColor',sw}) => base(<>
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
<circle cx="12" cy="13" r="4"/>
</>, size, color, sw);
export const KeyIcon = ({size=20,color='currentColor',sw}) => base(<>
<circle cx="8" cy="12" r="5"/>
<path d="M13 12h8M17 10v4"/>
</>, size, color, sw);
export const DatabaseIcon = ({size=20,color='currentColor',sw}) => base(<>
<ellipse cx="12" cy="5" rx="9" ry="3"/>
<path d="M3 5v4c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/>
<path d="M3 9v4c0 1.66 4.03 3 9 3s9-1.34 9-3V9"/>
<path d="M3 13v4c0 1.66 4.03 3 9 3s9-1.34 9-3v-4"/>
</>, size, color, sw);
export const LinkIcon = ({size=20,color='currentColor',sw}) => base(<>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
</>, size, color, sw);
export const ZapIcon = ({size=20,color='currentColor',sw}) => base(<>
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</>, size, color, sw);