js实现json的svg图标生成及下载代码-html代码-BFW代码库

js实现json的svg图标生成及下载代码

代码语言：html

所属分类：其他

代码描述：js实现json的svg图标生成及下载代码，html是容器，让ai生成指定json格式的svg图标，提示词：你现在是一个顶尖的 SVG 图标画师和 UI 设计大师。我的系统中有一套图标配置生成器。该生成器要求每个图标定义在一个 24x24 的虚拟网格中，无需包含外层的

代码标签： js json svg 图标生成下载代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电脑主题 SVG 矢量图标生成器</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .icon-grid-card:hover .icon-actions {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen flex flex-col font-sans overflow-hidden">

    <!-- 顶部导航栏 -->
    <header class="bg-slate-900 border-b border-slate-800 px-8 py-4 flex justify-between items-center shrink-0">
        <div class="flex items-center space-x-3">
            <span class="text-xl font-black tracking-wider text-blue-500 flex items-center gap-2">
                <i class="fa-solid fa-laptop-code"></i> PC-IconStudio
            </span>
            <span class="text-xs px-2.5 py-1 bg-slate-800 text-slate-400 rounded-full">电脑设备主题</span>
        </div>
        
        <!-- 全局批量下载 -->
        <div class="flex items-center space-x-3">
            <button onclick="downloadAll('svg')" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-sm font-bold flex items-center gap-2 transition">
                <i class="fa-solid fa-file-arrow-down"></i> 打包下载全套 SVG
            </button>
            <button onclick="downloadAll('png')" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm font-bold flex items-center gap-2 transition">
                <i class="fa-solid fa-image"></i> 打包下载全套 PNG
            </button>
        </div>
    </header>

    <!-- 主工作区 -->
    <main class="flex-1 flex overflow-hidden">
        
        <!-- 左侧：参数控制面板 -->
        <aside class="w-80 bg-slate-900 border-r border-slate-800 p-6 flex flex-col space-y-6 overflow-y-auto shrink-0">
            <div>
                <h3 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-3&quo.........完整代码请登录后点击上方下载按钮下载查看