142 lines
5.7 KiB
JavaScript
142 lines
5.7 KiB
JavaScript
// ── 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"/>}
|
||
{dir==='left' && <polyline points="15 18 9 12 15 6"/>}
|
||
{dir==='up' && <polyline points="18 15 12 9 6 15"/>}
|
||
</>, 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);
|