/**
* ═══════════════════════════════════════════════════════════════════
* SVG ICON LIBRARY — ULTRA ENTERPRISE EDITION
* Crypto Monitor HF — 50+ Professional SVG Icons
* ═══════════════════════════════════════════════════════════════════
*
* All icons are:
* - Pure SVG (NO PNG, NO font-icons)
* - 24×24 viewBox
* - stroke-width: 1.75
* - stroke-linecap: round
* - stroke-linejoin: round
* - currentColor support
* - Fully accessible
*
* Icon naming: camelCase (e.g., trendingUp, checkCircle)
*/
class IconLibrary {
constructor() {
this.icons = this.initializeIcons();
}
/**
* Initialize all SVG icons
*/
initializeIcons() {
const strokeWidth = "1.75";
const baseProps = `fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round"`;
return {
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 📊 FINANCE & CRYPTO
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
trendingUp: ``,
trendingDown: ``,
dollarSign: ``,
bitcoin: ``,
ethereum: ``,
pieChart: ``,
barChart: ``,
activity: ``,
lineChart: ``,
candlestickChart: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// ✅ STATUS & INDICATORS
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
checkCircle: ``,
check: ``,
xCircle: ``,
alertCircle: ``,
alertTriangle: ``,
info: ``,
helpCircle: ``,
wifi: ``,
wifiOff: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 🖱️ NAVIGATION & UI
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
menu: ``,
close: ``,
chevronRight: ``,
chevronLeft: ``,
chevronDown: ``,
chevronUp: ``,
arrowRight: ``,
arrowLeft: ``,
arrowUp: ``,
arrowDown: ``,
externalLink: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 🔧 ACTIONS
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
refresh: ``,
refreshCw: ``,
search: ``,
filter: ``,
download: ``,
upload: ``,
settings: ``,
sliders: ``,
edit: ``,
trash: ``,
copy: ``,
plus: ``,
minus: ``,
maximize: ``,
minimize: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 💾 DATA & STORAGE
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
database: ``,
server: ``,
cpu: ``,
hardDrive: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 📁 FILES & DOCUMENTS
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
fileText: ``,
file: ``,
folder: ``,
folderOpen: ``,
list: ``,
newspaper: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 🏠 FEATURES
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
home: ``,
bell: ``,
bellOff: ``,
layers: ``,
globe: ``,
zap: ``,
shield: ``,
shieldCheck: ``,
lock: ``,
unlock: ``,
users: ``,
user: ``,
userPlus: ``,
userMinus: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 🌙 THEME & APPEARANCE
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
sun: ``,
moon: ``,
eye: ``,
eyeOff: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 🧠 AI & SPECIAL
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
brain: ``,
box: ``,
package: ``,
terminal: ``,
code: ``,
codesandbox: ``,
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 📊 DASHBOARD SPECIFIC
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
grid: ``,
layout: ``,
monitor: ``,
smartphone: ``,
tablet: ``,
clock: ``,
calendar: ``,
target: ``,
anchor: ``,
};
}
/**
* Get icon SVG by name
* @param {string} name - Icon name
* @param {number} size - Icon size in pixels (default: 20)
* @param {string} className - Additional CSS class
* @returns {string} SVG markup
*/
getIcon(name, size = 20, className = '') {
const iconSvg = this.icons[name];
if (!iconSvg) {
console.warn(`[Icons] Icon "${name}" not found — using fallback`);
return this.icons.alertCircle;
}
let modifiedSvg = iconSvg
.replace(/width="20"/, `width="${size}"`)
.replace(/height="20"/, `height="${size}"`);
if (className) {
modifiedSvg = modifiedSvg.replace('