// IconUtils.js - Utility for loading SVG icons
import { app } from "../../../scripts/app.js";
/**
* Generates HTML string for an icon with standardized styling
* @param {Image} icon - The icon Image object (or null)
* @param {string} fallback - Fallback text/emoji if icon is not available (default: '')
* @param {number} size - Size of the icon in pixels (default: 14)
* @param {string} extraStyles - Additional CSS styles (default: 'vertical-align: middle;')
* @returns {string} HTML string for the icon or fallback
*/
export function getIconHtml(icon, fallback = '', size = 14, extraStyles = 'vertical-align: middle;') {
if (!icon) return fallback;
return `
`;
}
/**
* Loads SVG icons and converts them to Image objects
* @param {Object} icons - Object to store loaded icons
* @param {string} iconColor - Color for the SVG icons (default: "#dddddd")
*/
export function loadIcons(icons = {}, iconColor = "#dddddd", userColors = {}) {
const svgs = {
upscale: ``,
resolution: ``,
megapixels: ``,
customPreset: ``,
delete: ``,
edit: ``,
export: ``,
import: ``,
settings: ``,
autoCalculate: ``,
autoResize: ``,
autoFit: ``,
dragAndDuplicate: ``,
snap: ``,
swap: ``,
add_plus: ``
};
for (const name in svgs) {
const color = userColors[name] || iconColor;
const svg = svgs[name].replace("{color}", color);
const img = new Image();
img.onload = () => app.graph.setDirtyCanvas(true);
img.src = `data:image/svg+xml;base64,${btoa(svg)}`;
icons[name] = img;
}
return icons;
}