From 3cbbdba6a42ee07291ea0ea35162ca41fbbabc13 Mon Sep 17 00:00:00 2001
From: jiwangyihao <jwyh@jwyihao.top>
Date: Mon, 2 Jun 2025 23:33:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: xudeyu444 <xudeyu444@users.noreply.github.com>
Co-authored-by: Sylvanysc <Sylvanysc@users.noreply.github.com>
---
 app.vue                | 11 ++++++++++-
 assets/icons/spark.svg | 25 ++++++++++++++++++-------
 pages/index.vue        | 20 ++++++++++++++++++--
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/app.vue b/app.vue
index ab693a6..9dfb2aa 100644
--- a/app.vue
+++ b/app.vue
@@ -77,8 +77,17 @@ onMounted(() => {
         <NuxtLink to="/" class="flex items-center">
           <Icon
             name="s:spark"
-            class="text-4xl mr-2 fill-(--p-primary-color)"
+            class="text-4xl mr-2"
             mode="svg"
+            :style="{
+              '--s-c1': 'var(--p-primary-color)',
+              '--s-c2': 'var(--p-primary-color)',
+              '--s-c3': 'var(--p-primary-color)',
+              '--s-c4': 'var(--p-primary-color)',
+              '--s-c5': 'var(--p-primary-color)',
+              '--s-c6': 'var(--p-primary-color)',
+              '--s-c7': 'var(--p-primary-color)',
+            }"
           />
           <h1 class="font-(family-name:--s-title-font)">SPARK</h1>
         </NuxtLink>
diff --git a/assets/icons/spark.svg b/assets/icons/spark.svg
index e67d20b..6ce7875 100644
--- a/assets/icons/spark.svg
+++ b/assets/icons/spark.svg
@@ -1,13 +1,24 @@
 <svg viewBox="40 40 200 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
+    <style>
+    :root {
+        --s-c1: #FFC344;
+        --s-c2: #F06767;
+        --s-c3: #3F62EB;
+        --s-c4: #FCE102;
+        --s-c5: #5ED938;
+        --s-c6: #8FDBE9;
+        --s-c7: #FD7AFF;
+    }
+    </style>
     <g transform="translate(-371 -278)">
-        <path d="M500.632 323.912C500.632 323.912 516.347 323.69 532.498 333.682 548.649 343.673 558.034 353.221 561.09 359.438 564.145 365.655 574.185 376.535 573.967 396.518 573.749 416.501 569.165 429.823 561.308 440.925 553.451 452.027 539.264 460.464 522.24 460.908 505.215 461.352 494.303 450.25 490.592 444.033 486.882 437.816 485.354 424.494 489.937 414.947 494.521 405.399 501.724 405.399 504.124 406.287 506.525 407.175 507.18 408.508 508.49 410.95 509.799 413.392 510.672 412.948 512.636 411.616 514.601 410.284 515.255 408.73 514.819 406.731 514.383 404.733 511.763 402.29 509.581 401.624 507.398 400.958 504.343 398.96 499.977 399.626 495.612 400.293 487.1 402.513 479.898 412.282 472.695 422.052 473.568 437.15 477.933 444.255 482.299 451.361 490.592 464.682 508.926 469.345 527.26 474.008 556.943 460.242 567.201 438.927 577.459 417.611 577.677 407.62 577.241 390.079 576.804 372.538 561.308 346.338 544.065 336.79 526.823 327.243 513.946 321.692 500.632 323.912Z"/>
-        <path d="M509.755 412.612C509.755 412.612 505.433 408.529 501.575 415.752 497.717 422.974 495.865 429.411 499.723 437.261 503.581 445.111 511.607 449.821 523.953 449.664 536.3 449.507 545.405 446.524 550.807 437.575 556.208 428.626 560.375 422.032 560.839 418.735 561.301 415.437 563.771 419.206 562.999 422.032 562.227 424.858 562.382 430.353 564.542 429.254 566.703 428.155 568.401 426.428 568.709 427.213 569.018 427.998 566.24 432.865 564.928 435.298 563.616 437.732 559.527 443.62 557.135 445.896 554.742 448.173 551.424 451.391 547.489 453.746 543.553 456.101 537.457 458.849 534.062 459.477 530.667 460.105 523.876 461.439 520.018 461.282 516.159 461.125 511.221 460.418 505.742 457.671 500.263 454.924 494.322 450.685 492.007 446.445 489.691 442.206 486.142 438.36 486.914 427.684 487.685 417.007 491.158 411.513 493.781 409 496.405 406.488 500.263 405.389 502.81 405.939 505.356 406.488 506.977 407.98 507.594 409.079 508.211 410.178 509.214 412.219 509.755 412.612Z"/>
-        <path d="M548.955 469.132C548.955 469.132 567.475 458.299 576.117 441.186 584.76 424.073 588.464 413.083 587.383 396.283 586.303 379.484 583.679 387.805 586.612 380.583 589.544 373.361 584.76 359.073 586.766 358.131 588.772 357.19 593.094 364.412 594.328 370.221 595.563 376.03 600.964 393.928 596.643 416.694 592.322 439.459 582.136 448.565 575.345 454.688 568.555 460.811 553.122 471.488 550.807 471.33 548.492 471.173 548.183 471.173 548.955 469.132Z"/>
-        <path d="M515.619 436.162C515.619 436.162 525.496 438.36 533.059 433.65 540.621 428.939 546.485 421.247 547.412 418.264 548.338 415.28 548.492 420.933 549.572 418.106 550.653 415.281 554.974 409.629 552.813 396.44 550.653 383.252 550.498 382.624 546.485 375.559 542.473 368.494 532.904 358.76 527.04 355.62 521.175 352.479 512.996 347.769 501.729 348.084 490.463 348.398 494.167 347.612 483.364 349.497 472.561 351.38 462.838 356.561 459.597 359.388 456.356 362.214 447.713 369.907 444.627 374.146 441.54 378.385 433.052 387.962 428.576 401.307 424.101 414.653 422.249 416.065 421.94 424.858 421.631 433.65 422.712 436.005 420.86 436.79 419.008 437.575 419.317 430.196 419.471 425.015 419.625 419.834 419.625 406.332 426.416 391.259 433.206 376.187 445.244 363.627 452.035 359.074 458.825 354.52 466.696 348.398 478.889 345.415 491.081 342.431 503.273 342.902 510.835 344.316 518.397 345.728 530.127 350.596 536.454 355.463 542.781 360.33 549.726 366.296 554.974 376.03 560.221 385.764 561.61 398.167 561.456 403.348 561.301 408.53 558.678 420.462 554.665 426.271 550.653 432.08 545.251 438.988 539.695 441.5 534.139 444.012 527.348 444.797 521.793 442.285 516.237 439.773 516.545 438.831 515.619 436.162Z"/>
-        <path d="M515.619 436.162C515.619 436.162 523.44 438.371 530.043 435.374 536.645 432.376 539.1 429.49 540.683 427.769 542.265 426.048 545.266 422.829 546.084 421.33 546.903 419.832 547.776 418.943 547.776 418.388 547.776 417.833 546.248 416.501 547.721 413.281 549.195 410.062 550.504 402.679 549.85 399.349 549.195 396.018 547.667 377.534 534.572 365.211 521.476 352.888 508.49 351.445 508.49 351.445 508.49 351.445 529.224 357.995 538.936 377.867 548.649 397.739 545.484 410.506 539.264 418.277 533.044 426.048 524.204 426.937 521.803 424.938 519.403 422.94 514.455 434.063 515.619 436.162Z"/>
-        <path d="M490.374 364.878C490.374 364.878 476.406 364.767 465.82 371.761 455.234 378.755 450.105 384.417 447.159 388.857 444.212 393.298 440.83 399.404 441.266 399.293 441.703 399.182 454.034 381.975 463.637 377.534 473.241 373.093 482.844 366.876 496.049 371.428 509.254 375.979 515.474 382.307 518.311 380.753 521.148 379.199 521.694 377.312 520.057 375.202 518.42 373.093 506.852 362.768 490.374 364.878Z"/>
-        <path d="M469.474 453.589C470.4 454.06 477.345 466.149 482.901 468.19 488.457 470.231 492.161 470.388 492.778 471.33 493.395 472.272 493.241 476.982 498.18 479.023 503.118 481.064 526.268 487.502 532.904 488.13 539.541 488.758 533.985 492.683 537.997 494.096 542.01 495.509 559.141 496.294 563.307 494.566 567.475 492.84 567.475 496.137 560.221 498.963 552.967 501.789 533.83 508.54 521.33 506.97 508.829 505.4 494.013 502.731 485.679 496.765 477.345 490.799 473.796 488.13 476.882 487.659 479.969 487.188 488.148 495.98 491.698 496.922 495.247 497.864 498.18 497.864 496.019 495.666 493.859 493.468 479.814 483.733 478.425 484.204 477.037 484.675 474.104 484.99 471.635 481.692 469.165 478.395 456.202 460.183 456.973 450.449 457.745 440.715 460.214 443.227 463.147 446.838 466.079 450.449 469.474 453.589 469.474 453.589Z"/>
+        <path style="fill: var(--s-c1)" d="M500.632 323.912C500.632 323.912 516.347 323.69 532.498 333.682 548.649 343.673 558.034 353.221 561.09 359.438 564.145 365.655 574.185 376.535 573.967 396.518 573.749 416.501 569.165 429.823 561.308 440.925 553.451 452.027 539.264 460.464 522.24 460.908 505.215 461.352 494.303 450.25 490.592 444.033 486.882 437.816 485.354 424.494 489.937 414.947 494.521 405.399 501.724 405.399 504.124 406.287 506.525 407.175 507.18 408.508 508.49 410.95 509.799 413.392 510.672 412.948 512.636 411.616 514.601 410.284 515.255 408.73 514.819 406.731 514.383 404.733 511.763 402.29 509.581 401.624 507.398 400.958 504.343 398.96 499.977 399.626 495.612 400.293 487.1 402.513 479.898 412.282 472.695 422.052 473.568 437.15 477.933 444.255 482.299 451.361 490.592 464.682 508.926 469.345 527.26 474.008 556.943 460.242 567.201 438.927 577.459 417.611 577.677 407.62 577.241 390.079 576.804 372.538 561.308 346.338 544.065 336.79 526.823 327.243 513.946 321.692 500.632 323.912Z"/>
+        <path style="fill: var(--s-c2)" d="M509.755 412.612C509.755 412.612 505.433 408.529 501.575 415.752 497.717 422.974 495.865 429.411 499.723 437.261 503.581 445.111 511.607 449.821 523.953 449.664 536.3 449.507 545.405 446.524 550.807 437.575 556.208 428.626 560.375 422.032 560.839 418.735 561.301 415.437 563.771 419.206 562.999 422.032 562.227 424.858 562.382 430.353 564.542 429.254 566.703 428.155 568.401 426.428 568.709 427.213 569.018 427.998 566.24 432.865 564.928 435.298 563.616 437.732 559.527 443.62 557.135 445.896 554.742 448.173 551.424 451.391 547.489 453.746 543.553 456.101 537.457 458.849 534.062 459.477 530.667 460.105 523.876 461.439 520.018 461.282 516.159 461.125 511.221 460.418 505.742 457.671 500.263 454.924 494.322 450.685 492.007 446.445 489.691 442.206 486.142 438.36 486.914 427.684 487.685 417.007 491.158 411.513 493.781 409 496.405 406.488 500.263 405.389 502.81 405.939 505.356 406.488 506.977 407.98 507.594 409.079 508.211 410.178 509.214 412.219 509.755 412.612Z"/>
+        <path style="fill: var(--s-c3)" d="M548.955 469.132C548.955 469.132 567.475 458.299 576.117 441.186 584.76 424.073 588.464 413.083 587.383 396.283 586.303 379.484 583.679 387.805 586.612 380.583 589.544 373.361 584.76 359.073 586.766 358.131 588.772 357.19 593.094 364.412 594.328 370.221 595.563 376.03 600.964 393.928 596.643 416.694 592.322 439.459 582.136 448.565 575.345 454.688 568.555 460.811 553.122 471.488 550.807 471.33 548.492 471.173 548.183 471.173 548.955 469.132Z"/>
+        <path style="fill: var(--s-c4)" d="M515.619 436.162C515.619 436.162 525.496 438.36 533.059 433.65 540.621 428.939 546.485 421.247 547.412 418.264 548.338 415.28 548.492 420.933 549.572 418.106 550.653 415.281 554.974 409.629 552.813 396.44 550.653 383.252 550.498 382.624 546.485 375.559 542.473 368.494 532.904 358.76 527.04 355.62 521.175 352.479 512.996 347.769 501.729 348.084 490.463 348.398 494.167 347.612 483.364 349.497 472.561 351.38 462.838 356.561 459.597 359.388 456.356 362.214 447.713 369.907 444.627 374.146 441.54 378.385 433.052 387.962 428.576 401.307 424.101 414.653 422.249 416.065 421.94 424.858 421.631 433.65 422.712 436.005 420.86 436.79 419.008 437.575 419.317 430.196 419.471 425.015 419.625 419.834 419.625 406.332 426.416 391.259 433.206 376.187 445.244 363.627 452.035 359.074 458.825 354.52 466.696 348.398 478.889 345.415 491.081 342.431 503.273 342.902 510.835 344.316 518.397 345.728 530.127 350.596 536.454 355.463 542.781 360.33 549.726 366.296 554.974 376.03 560.221 385.764 561.61 398.167 561.456 403.348 561.301 408.53 558.678 420.462 554.665 426.271 550.653 432.08 545.251 438.988 539.695 441.5 534.139 444.012 527.348 444.797 521.793 442.285 516.237 439.773 516.545 438.831 515.619 436.162Z"/>
+        <path style="fill: var(--s-c5)" d="M515.619 436.162C515.619 436.162 523.44 438.371 530.043 435.374 536.645 432.376 539.1 429.49 540.683 427.769 542.265 426.048 545.266 422.829 546.084 421.33 546.903 419.832 547.776 418.943 547.776 418.388 547.776 417.833 546.248 416.501 547.721 413.281 549.195 410.062 550.504 402.679 549.85 399.349 549.195 396.018 547.667 377.534 534.572 365.211 521.476 352.888 508.49 351.445 508.49 351.445 508.49 351.445 529.224 357.995 538.936 377.867 548.649 397.739 545.484 410.506 539.264 418.277 533.044 426.048 524.204 426.937 521.803 424.938 519.403 422.94 514.455 434.063 515.619 436.162Z"/>
+        <path style="fill: var(--s-c6)" d="M490.374 364.878C490.374 364.878 476.406 364.767 465.82 371.761 455.234 378.755 450.105 384.417 447.159 388.857 444.212 393.298 440.83 399.404 441.266 399.293 441.703 399.182 454.034 381.975 463.637 377.534 473.241 373.093 482.844 366.876 496.049 371.428 509.254 375.979 515.474 382.307 518.311 380.753 521.148 379.199 521.694 377.312 520.057 375.202 518.42 373.093 506.852 362.768 490.374 364.878Z"/>
+        <path style="fill: var(--s-c7)" d="M469.474 453.589C470.4 454.06 477.345 466.149 482.901 468.19 488.457 470.231 492.161 470.388 492.778 471.33 493.395 472.272 493.241 476.982 498.18 479.023 503.118 481.064 526.268 487.502 532.904 488.13 539.541 488.758 533.985 492.683 537.997 494.096 542.01 495.509 559.141 496.294 563.307 494.566 567.475 492.84 567.475 496.137 560.221 498.963 552.967 501.789 533.83 508.54 521.33 506.97 508.829 505.4 494.013 502.731 485.679 496.765 477.345 490.799 473.796 488.13 476.882 487.659 479.969 487.188 488.148 495.98 491.698 496.922 495.247 497.864 498.18 497.864 496.019 495.666 493.859 493.468 479.814 483.733 478.425 484.204 477.037 484.675 474.104 484.99 471.635 481.692 469.165 478.395 456.202 460.183 456.973 450.449 457.745 440.715 460.214 443.227 463.147 446.838 466.079 450.449 469.474 453.589 469.474 453.589Z"/>
     </g>
 </svg>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index b59ed52..b730f9a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -311,8 +311,17 @@ onMounted(() => {
         <div class="flex items-center gap-6">
           <Icon
             name="s:spark"
-            class="text-6xl fill-(--p-primary-500)"
+            class="text-6xl"
             mode="svg"
+            :style="{
+              '--s-c1': 'var(--p-primary-500)',
+              '--s-c2': 'var(--p-primary-500)',
+              '--s-c3': 'var(--p-primary-500)',
+              '--s-c4': 'var(--p-primary-500)',
+              '--s-c5': 'var(--p-primary-500)',
+              '--s-c6': 'var(--p-primary-500)',
+              '--s-c7': 'var(--p-primary-500)',
+            }"
           />
           <h2
             class="text-4xl font-(family-name:--s-title-font) text-(--p-primary-500)"
@@ -540,11 +549,18 @@ onMounted(() => {
       >
         <Icon
           name="s:spark"
-          class="fill-(--p-primary-100) absolute top-1/2 -translate-y-1/2"
+          class="absolute top-1/2 -translate-y-1/2"
           mode="svg"
           :style="{
             height: 'auto',
             width: '100%',
+            '--s-c1': 'var(--p-primary-100)',
+            '--s-c2': 'var(--p-primary-100)',
+            '--s-c3': 'var(--p-primary-100)',
+            '--s-c4': 'var(--p-primary-100)',
+            '--s-c5': 'var(--p-primary-100)',
+            '--s-c6': 'var(--p-primary-100)',
+            '--s-c7': 'var(--p-primary-100)',
           }"
         />
       </div>