Add logo (#241)

mizdra · web-flow · commit 48818ca68166 · 2025-08-11T15:51:31.000+09:00
* add logo

* add logo in README

* add icon for vscode extension

* add changelog
diff --git a/.changeset/small-clowns-accept.md b/.changeset/small-clowns-accept.md
@@ -0,0 +1,5 @@
+---
+'css-modules-kit-vscode': patch
+---
+
+chore: add logo for vscode extension
diff --git a/README.md b/README.md
@@ -2,6 +2,10 @@
 
 A toolkit for making CSS Modules useful.
 
+<p align="center">
+  <img alt="Logo" width="256" height="256" src="./docs/logo.png" />
+</p>
+
 ## Intro
 
 By default, CSS Modules have limited language features in editors. For example:
diff --git a/docs/logo.png b/docs/logo.png
diff --git a/docs/logo.svg b/docs/logo.svg
@@ -0,0 +1,37 @@
+<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+  <title>CSS Modules Kit Logo</title>
+  <style>
+    .bg    { fill: #ffffff; }
+    .line  { fill: none; stroke: #1b3762ff; stroke-width: 10; stroke-linejoin: round; }
+    .word  { fill: #1b3762ff; font: 700 45px system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
+    .dot   { fill: #1b3762ff; }
+  </style>
+
+  <!-- background -->
+  <rect class="bg" width="100%" height="100%"/>
+
+  <!-- group: scaled up, shifted down -->
+  <g>
+    <!-- toolbox body -->
+    <rect class="line" x="10%" y="32%" width="80%" height="58%" rx="8"/>
+
+    <!-- toolbox lid -->
+    <rect class="line" x="10%" y="19%" width="80%" height="13%" rx="6"/>
+
+    <!-- rivets on lid -->
+    <circle class="dot" cx="20%" cy="25%" r="5"/>
+    <circle class="dot" cx="35%" cy="25%" r="5"/>
+    <circle class="dot" cx="65%" cy="25%" r="5"/>
+    <circle class="dot" cx="80%" cy="25%" r="5"/>
+
+    <!-- arched handle -->
+    <path class="line" d="M120 60v-16c0-8 6-14 14-14h52c8 0 14 6 14 14v16"/>
+
+    <!-- text inside toolbox body -->
+    <text x="60" y="158" class="word">
+      <tspan x="60" dy="0">CSS</tspan>
+      <tspan x="60" dy="50">Modules</tspan>
+      <tspan x="60" dy="50">Kit</tspan>
+    </text>
+  </g>
+</svg>
diff --git a/packages/vscode/image/logo.png b/packages/vscode/image/logo.png
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -23,6 +23,7 @@
   "engines": {
     "vscode": "^1.84.0"
   },
+  "icon": "./image/logo.png",
   "keywords": [
     "css-modules",
     "typescript"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'css-modules-kit-vscode': patch
 +---
++
 +chore: add logo for vscode extension