141 lines
4.1 KiB
JavaScript
141 lines
4.1 KiB
JavaScript
/**
|
||
* Emoji Icons - Beautiful Emoji Icons (Offline)
|
||
* Modern, beautiful emoji icons, completely offline
|
||
* Compatible with existing fa-* class names
|
||
*/
|
||
|
||
const Icons = {
|
||
// 文档相关图标
|
||
'document-text': '📄',
|
||
'document': '📄',
|
||
'file-text': '📝',
|
||
'book-open': '📖',
|
||
'book': '📖',
|
||
|
||
// 健康/状态相关图标
|
||
'heart-pulse': '💓',
|
||
'heart': '❤️',
|
||
'check-circle': '✅',
|
||
'x-circle': '❌',
|
||
'exclamation-triangle': '⚠️',
|
||
'information-circle': 'ℹ️',
|
||
|
||
// 导航相关图标
|
||
'home': '🏠',
|
||
'arrow-right': '➡️',
|
||
'arrow-left': '⬅️',
|
||
|
||
// 操作相关图标
|
||
'arrow-downTray': '⬇️',
|
||
'download': '⬇️',
|
||
'trash': '🗑️',
|
||
'folder': '📁',
|
||
'magnifying-glass': '🔍',
|
||
'eye': '👁️',
|
||
'check-square': '☑️',
|
||
'square': '⬜',
|
||
'ellipsis-horizontal': '⋯',
|
||
|
||
// 系统相关图标
|
||
'server': '🖥️',
|
||
'chart-bar': '📊',
|
||
'calendar': '📅',
|
||
'clock': '🕐',
|
||
'user': '👤',
|
||
'cpu-chip': '💾',
|
||
'circle-stack': '🗃️',
|
||
'globe-alt': '🌐',
|
||
|
||
// 设置相关图标
|
||
'cog-6-tooth': '⚙️',
|
||
'bell': '🔔',
|
||
'inbox': '📥',
|
||
|
||
// 新增：文件操作
|
||
'folder-plus': '📁➕',
|
||
'document-plus': '📝➕',
|
||
'arrow-path': '🔄',
|
||
};
|
||
|
||
// 创建图标元素的辅助函数
|
||
function createIcon(name, className = '') {
|
||
const emoji = Icons[name];
|
||
if (!emoji) {
|
||
console.warn(`Icon "${name}" not found`);
|
||
return '';
|
||
}
|
||
return `<span class="inline-emoji ${className}" data-icon="${name}">${emoji}</span>`;
|
||
}
|
||
|
||
// 初始化：替换所有 <i class="fa fa-"> 为 Emoji 图标
|
||
function initIcons() {
|
||
// 映射旧图标名到新图标名
|
||
const iconMapping = {
|
||
'fa-file-text-o': 'document-text',
|
||
'fa-file-text': 'document-text',
|
||
'fa-book': 'book-open',
|
||
'fa-book-o': 'book-open',
|
||
'fa-heartbeat': 'heart-pulse',
|
||
'fa-home': 'home',
|
||
'fa-arrow-right': 'arrow-right',
|
||
'fa-download': 'download',
|
||
'fa-trash': 'trash',
|
||
'fa-check-circle': 'check-circle',
|
||
'fa-times-circle': 'x-circle',
|
||
'fa-info-circle': 'information-circle',
|
||
'fa-exclamation-circle': 'exclamation-triangle',
|
||
'fa-refresh': 'arrow-path',
|
||
'fa-server': 'server',
|
||
'fa-clock-o': 'clock',
|
||
'fa-eye': 'eye',
|
||
};
|
||
|
||
// 查找所有 Font Awesome 图标
|
||
document.querySelectorAll('i.fa').forEach(icon => {
|
||
const classes = Array.from(icon.classList);
|
||
const iconName = classes.find(cls => cls.startsWith('fa-') && cls !== 'fa');
|
||
|
||
if (iconName) {
|
||
// 映射到新图标名
|
||
const mappedName = iconMapping[iconName] || iconName.replace('fa-', '');
|
||
const emoji = Icons[mappedName];
|
||
|
||
if (emoji) {
|
||
// 保留原有的类名（除了 fa 和 fa-*）
|
||
const otherClasses = classes.filter(cls => !cls.startsWith('fa'));
|
||
const newElement = document.createElement('span');
|
||
newElement.className = `inline-emoji ${otherClasses.join(' ')}`;
|
||
newElement.textContent = emoji;
|
||
newElement.style.display = 'inline-block';
|
||
newElement.style.verticalAlign = 'middle';
|
||
|
||
// 处理旋转动画
|
||
if (classes.includes('fa-spin')) {
|
||
newElement.setAttribute('data-spin', 'true');
|
||
}
|
||
|
||
// 复制样式
|
||
const computedStyle = window.getComputedStyle(icon);
|
||
if (computedStyle.fontSize) {
|
||
newElement.style.fontSize = computedStyle.fontSize;
|
||
}
|
||
|
||
icon.parentNode.replaceChild(newElement, icon);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initIcons);
|
||
} else {
|
||
initIcons();
|
||
}
|
||
|
||
// 添加便捷方法到全局
|
||
window.Icons = {
|
||
create: createIcon,
|
||
render: (name, className = '') => createIcon(name, className),
|
||
};
|