import { html } from "lit";
/**
* Definice SVG ikon s jejich variantami
* Každá ikona může mít více variant (outline, solid, mini, micro)
* Použití: přidejte novou ikonu s jejími variantami zde
*/
const svg = {
info: {
mini: ``,
solid: ``
},
settings: {
solid:``,
outline: `
`
},
share: {
outline: ``,
micro: ``,
mini: ``
},
folder: {
outline: ``,
micro: ``
},
wifi: {
micro: ``
},
user: {
micro: ``
},
image: {
outline: ``,
micro: ``
},
upwards: {
outline: ``
},
copy: {
outline: ``,
mini: ``
},
right: {
outline: ``,
micro: ``
},
trash: {
micro: ``
},
addfolder: {
micro: ``
},
upload: {
micro: ``
},
close: {
outline: ``,
micro: ``
},
edit: {
micro: ``
},
comment: {
micro: ``
},
grid: {
solid: ``,
micro: ``
},
list: {
solid: ``,
micro: ``
},
check: {
micro: ``
},
save: {
outline: ``,
micro: ``
},
restore: {
outline: ``
},
unlink: {
outline: ``,
micro: ``
},
link: {
outline: ``,
micro: ``
},
zoom: {
outline: ``,
micro: ``
},
adjustment: {
micro: ``,
outline: ``
},
range: {
outline: ``,
micro: ``
}
} as const;
// Typ pro dostupné varianty konkrétní ikony
type AvailableVariants = keyof typeof svg[T];
/**
* Základní funkce pro vykreslení ikony
* @param name - název ikony (např. 'folder')
* @param variant - varianta ikony (např. 'outline')
* @param className - CSS třídy pro přidání
* @param styles - inline styly
*/
export const icon = (
name: T,
variant: AvailableVariants,
className?: string,
styles?: string
) => {
const iconSvg = svg[name][variant] as string;
if (!iconSvg) {
console.warn(`Icon variant "${String(variant)}" not found for icon "${String(name)}"`);
return html``;
}
// Modifikace SVG - přidání CSS tříd a stylů
let modifiedSvg = iconSvg;
if (className || styles) {
// Pokud má SVG existující class atribut, přidej k němu
if (modifiedSvg.includes('class="')) {
modifiedSvg = modifiedSvg.replace(
/class="([^"]*)"/,
`class="$1 ${className || ''}"`
);
} else {
// Pokud nemá class atribut, přidej ho do prvního SVG tagu
modifiedSvg = modifiedSvg.replace(
/]*)>/,
``
);
}
// Přidej styles pokud jsou specifikované
if (styles) {
if (modifiedSvg.includes('style="')) {
modifiedSvg = modifiedSvg.replace(
/style="([^"]*)"/,
`style="$1; ${styles}"`
);
} else {
modifiedSvg = modifiedSvg.replace(
/]*)>/,
``
);
}
}
}
// Použij html literal pro bezpečné vložení SVG
return modifiedSvg;
}
/**
* Automatické generování objektu ikon z definice svg
* Vytváří strukturu: icons.nazevIkony.varianta(className?, styles?)
*/
const createIcons = () => {
const result = {} as any;
// Iterace přes všechny ikony
for (const iconName in svg) {
const iconKey = iconName as keyof typeof svg;
result[iconKey] = {};
// Iterace přes všechny varianty ikony
const iconVariants = svg[iconKey];
for (const variant in iconVariants) {
// Vytvoření funkce pro každou kombinaci ikona-varianta
result[iconKey][variant] = (className?: string, styles?: string) => {
return icon(iconName as keyof typeof svg, variant as any, className, styles);
};
}
}
return result;
}
/**
* TypeScript typ pro automaticky generovaný objekt ikon
* Zajišťuje typovou bezpečnost - pouze existující ikony a jejich varianty
*/
type IconsType = {
[K in keyof typeof svg]: {
[V in keyof typeof svg[K]]: (className?: string, styles?: string) => string
}
};
/**
* Exportovaný objekt ikon s typovou bezpečností
* Použití: icons.folder.outline("my-class", "color: red")
*/
const icons = createIcons() as IconsType;
export default icons;
// Příklad použití:
// icons.folder.outline("text-blue-500", "width: 24px; height: 24px")