Starsoup Docs

Appearance

這裡是為您的像素風網頁應用程式設計的完整 UI 圖標資產庫。這套資產採用統一的像素藝術風格（Pixel Art），具有一致的色調（紅、黃、棕色系），並且均為正方形、無背景設計。

以下是六個 SVG 代碼區塊，您可以直接將它們複製並貼上到您的 HTML 或 CSS 中。

1. 一根火柴 (Single Matchstick) ​

描述： 基礎單位，傾斜放置的紅頭火柴。 ![](Pasted image 20260317165641.png) SVG代碼：

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" shape-rendering="crispEdges">
  <!-- 像素網格基礎 (32x32) -->
  
  <!-- 火柴棒 (木頭色) -->
  <rect x="14" y="6" width="4" height="2" fill="#D2B48C" />
  <rect x="13" y="8" width="6" height="2" fill="#D2B48C" />
  <rect x="12" y="10" width="8" height="2" fill="#D2B48C" />
  <rect x="11" y="12" width="10" height="20" fill="#D2B48C" />
  
  <!-- 火柴頭 (紅色) -->
  <rect x="12" y="0" width="8" height="2" fill="#EE4444" />
  <rect x="11" y="2" width="10" height="4" fill="#EE4444" />
  <rect x="12" y="6" width="2" height="2" fill="#CC2222" /> <!-- 陰影 -->
  <rect x="18" y="6" width="2" height="2" fill="#CC2222" /> <!-- 陰影 -->
  
  <!-- 亮部 (米色) -->
  <rect x="13" y="2" width="2" height="2" fill="#FF8888" />
</svg>

2. 三根火柴疊放 (Three Matchsticks) ​

描述： 三根火柴交錯疊放，代表小額積分。 ![](Pasted image 20260317165617.png) SVG代碼：

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" shape-rendering="crispEdges">
  <!-- 共通顏色 -->
  <defs>
    <style>
      .wood { fill: <span class="obsidian-tag">D2B48C</span>; }
      .head { fill: <span class="obsidian-tag">EE4444</span>; }
      .shadow { fill: <span class="obsidian-tag">CC2222</span>; }
    </style>
  </defs>

  <!-- 火柴 1 (底部) -->
  <rect x="8" y="20" width="16" height="4" class="wood" transform="rotate(-15 16 22)" />
  <rect x="22" y="16" width="4" height="6" class="head" transform="rotate(-15 24 19)" />

  <!-- 火柴 2 (中部) -->
  <rect x="8" y="14" width="16" height="4" class="wood" transform="rotate(10 16 16)" />
  <rect x="6" y="12" width="4" height="6" class="head" transform="rotate(10 8 15)" />

  <!-- 火柴 3 (頂部) -->
  <rect x="10" y="8" width="16" height="4" class="wood" transform="rotate(-5 18 10)" />
  <rect x="24" y="4" width="4" height="6" class="head" transform="rotate(-5 26 7)" />
</svg>

3. 一盒火柴盒 (Single Matchbox) ​

描述： 一盒標準的像素風火柴盒，帶有經典的紅色/黃色包裝。 ![](Pasted image 20260317165600.png) SVG代碼：

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" shape-rendering="crispEdges">
  <!-- 盒子主體 (黃色/米色) -->
  <rect x="4" y="6" width="24" height="20" fill="#F0E68C" />
  
  <!-- 側面 (棕色/摩擦面) -->
  <rect x="4" y="26" width="24" height="4" fill="#8B4513" />
  <rect x="24" y="6" width="4" height="20" fill="#A0522D" />
  
  <!-- 包裝設計 (紅色/深藍) -->
  <rect x="8" y="10" width="16" height="12" fill="#CC2222" />
  <rect x="10" y="12" width="12" height="8" fill="#FFD700" />
  <rect x="14" y="14" width="4" height="4" fill="#000080" /> <!-- 小徽章 -->
  
  <!-- 邊框 (深色) -->
  <rect x="4" y="6" width="24" height="1" fill="#333" />
  <rect x="4" y="6" width="1" height="20" fill="#333" />
</svg>

4. 三盒火柴盒金字塔 (3 Matchboxes Pyramid) ​

描述： 三盒火柴盒疊成一個小金字塔，代表基礎 Pack。 ![](Pasted image 20260317165704.png)

SVG代碼：

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" shape-rendering="crispEdges">
  <!-- 共通顏色 defs -->
  <defs>
    <style>.box-base { fill: <span class="obsidian-tag">F0E68C</span>; } .box-side { fill: #8B4513; } .box-label { fill: <span class="obsidian-tag">CC2222</span>; }</style>
  </defs>

  <!-- 底部兩盒 -->
  <!-- 左下 -->
  <g transform="translate(8, 32) scale(0.8)">
    <rect x="4" y="6" width="24" height="20" class="box-base" />
    <rect x="4" y="26" width="24" height="4" class="box-side" />
    <rect x="8" y="10" width="16" height="12" class="box-label" />
  </g>
  <!-- 右下 -->
  <g transform="translate(28, 32) scale(0.8)">
    <rect x="4" y="6" width="24" height="20" class="box-base" />
    <rect x="4" y="26" width="24" height="4" class="box-side" />
    <rect x="8" y="10" width="16" height="12" class="box-label" />
  </g>

  <!-- 頂部一盒 -->
  <g transform="translate(18, 12) scale(0.8)">
    <rect x="4" y="6" width="24" height="20" class="box-base" />
    <rect x="4" y="26" width="24" height="4" class="box-side" />
    <rect x="8" y="10" width="16" height="12" class="box-label" />
  </g>
</svg>

5. 十盒火柴盒金字塔 (10 Matchboxes Pyramid) ​

描述： 十盒火柴盒疊成的大型金字塔（4-3-2-1 結構），代表大額 Pack。 ![](Pasted image 20260317165728.png) SVG代碼：

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" shape-rendering="crispEdges">
  <!-- 由於複雜度增加，需要更大的 viewBox，並簡化盒子圖案 -->
  <defs>
    <style>.box { fill: <span class="obsidian-tag">F0E68C</span>; stroke: #333; stroke-width: 0.5; } .label { fill: <span class="obsidian-tag">CC2222</span>; }</style>
  </defs>

  <!-- 4 - 底部層 -->
  <rect x="10" y="70" width="20" height="16" class="box" /> <rect x="12" y="72" width="16" height="8" class="label" />
  <rect x="30" y="70" width="20" height="16" class="box" /> <rect x="32" y="72" width="16" height="8" class="label" />
  <rect x="50" y="70" width="20" height="16" class="box" /> <rect x="52" y="72" width="16" height="8" class="label" />
  <rect x="70" y="70" width="20" height="16" class="box" /> <rect x="72" y="72" width="16" height="8" class="label" />

  <!-- 3 - 第三層 -->
  <rect x="20" y="54" width="20" height="16" class="box" /> <rect x="22" y="56" width="16" height="8" class="label" />
  <rect x="40" y="54" width="20" height="16" class="box" /> <rect x="42" y="56" width="16" height="8" class="label" />
  <rect x="60" y="54" width="20" height="16" class="box" /> <rect x="62" y="56" width="16" height="8" class="label" />

  <!-- 2 - 第二層 -->
  <rect x="30" y="38" width="20" height="16" class="box" /> <rect x="32" y="40" width="16" height="8" class="label" />
  <rect x="50" y="38" width="20" height="16" class="box" /> <rect x="52" y="40" width="16" height="8" class="label" />

  <!-- 1 - 頂部 -->
  <rect x="40" y="22" width="20" height="16" class="box" /> <rect x="42" y="24" width="16" height="8" class="label" />
</svg>

6. 火柴工廠 (Matchstick Factory) ​

描述： 像素風工廠，帶有鋸齒形屋頂、大煙囪和一個小小的火柴標誌，代表積分生成或報告處理中心。 ![](Pasted image 20260317165746.png) SVG代碼：

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="128" height="128" shape-rendering="crispEdges">
  <!-- 工廠主體 (灰色/深磚紅) -->
  <rect x="8" y="24" width="48" height="36" fill="#808080" />
  <rect x="8" y="24" width="48" height="4" fill="#696969" /> <!-- 陰影 -->

  <!-- 鋸齒形屋頂 -->
  <path d="M8 24 L16 16 L24 24 L32 16 L40 24 L48 16 L56 24 Z" fill="#A52A2A" />
  
  <!-- 煙囪 (右側) -->
  <rect x="44" y="4" width="8" height="20" fill="#696969" />
  <rect x="42" y="2" width="12" height="4" fill="#333" />
  
  <!-- 煙霧 (淡灰色) -->
  <rect x="46" y="0" width="4" height="2" fill="#D3D3D3" />
  <rect x="48" y="-2" width="6" height="2" fill="#D3D3D3" />

  <!-- 窗戶和門 -->
  <rect x="14" y="32" width="6" height="6" fill="#BFDBFE" /> <!-- 窗 -->
  <rect x="26" y="32" width="6" height="6" fill="#BFDBFE" /> <!-- 窗 -->
  <rect x="14" y="44" width="6" height="6" fill="#BFDBFE" /> <!-- 窗 -->
  <rect x="38" y="44" width="10" height="16" fill="#5C4033" /> <!-- 門 -->
  <rect x="44" y="52" width="2" height="2" fill="#FFD700" /> <!-- 門把手 -->

  <!-- 工廠上的火柴標誌 -->
  <rect x="18" y="16" width="2" height="8" fill="#EE4444" transform="rotate(15 19 20)" />
</svg>

如何使用這些資產？ ​

這套資產在網頁中的使用非常靈活。

1. 直接嵌入 HTML (推薦，性能最好)：

html
<div class="match-icon">
  <!-- 將上面的 SVG 代碼完整貼在這裡 -->
</div>

2. 在 CSS 中作為背景圖片 (便於縮放和重複)： 您需要先將 SVG 代碼轉換為 Data URI。例如，對於「一根火柴」：

css
.matchstick-icon {
  width: 32px;
  height: 32px;
  background-image: url('data:image/svg+xml;utf8,<svg ...>...</svg>');
  background-size: contain;
  background-repeat: no-repeat;
  /* 為了保持像素清晰 */
  image-rendering: pixelated; 
}

風格說明（致設計師）：

  • 無背景： 所有 SVG 均未設置底色，可完美融入您的網頁背景。
  • 像素清晰 (crispEdges)： 我在 SVG 標籤中添加了 shape-rendering="crispEdges"。這確保了在瀏覽器中縮放時，像素點依然保持銳利，不會變模糊。
  • 調色板： 嚴格遵循火柴的木頭色 (#D2B48C)、火柴頭紅色 (#EE4444)、包裝黃色 (#F0E68C) 以及深棕色摩擦面 (#8B4513) 作為統一色調。