feat: Add per-type NPC icons + update compendium icons

6 new SVG icons in images/icons/, one per NPC type:
- icon-npc-esprit-animal.svg (amber) — paw print + yin-yang
- icon-npc-fantome.svg (cyan) — ghost silhouette + 鬼 character
- icon-npc-demon.svg (red) — horned demon face
- icon-npc-jiugwaai.svg (emerald) — hybrid creature + 怪 character
- icon-npc-dieu.svg (gold) — divine halo + lotus
- icon-npc-mortel.svg (steel blue) — human silhouette + talisman

All 49 NPC JSON files updated with type-specific icon paths.
Pack cde-npcs recompiled.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-03-31 23:12:27 +02:00
parent ce1ed17ce1
commit 389d4b8008
126 changed files with 360 additions and 238 deletions

View File

@@ -0,0 +1,43 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="dm-glow" cx="50%" cy="45%" r="50%">
<stop offset="0%" stop-color="#cc2222" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#cc2222" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Fond -->
<circle cx="50" cy="50" r="48" fill="#101622" stroke="#1a2436" stroke-width="2"/>
<circle cx="50" cy="50" r="48" fill="url(#dm-glow)"/>
<!-- Flammes infernales en arrière-plan -->
<path d="M30 78 Q28 65 34 56 Q30 62 32 52 Q36 42 42 48 Q38 36 46 28 Q48 42 44 50 Q50 38 54 30 Q56 44 50 54 Q56 46 62 40 Q62 54 56 62 Q62 56 68 52 Q66 64 62 72 Q56 66 54 72 Q50 80 48 72 Q44 64 40 72 Q36 80 30 78 Z"
fill="#cc2222" fill-opacity="0.18" stroke="#cc2222" stroke-width="1" stroke-linejoin="round" opacity="0.7"/>
<!-- Visage de démon - contour de tête -->
<ellipse cx="50" cy="52" rx="20" ry="22" fill="#cc2222" fill-opacity="0.12" stroke="#cc2222" stroke-width="2"/>
<!-- Deux cornes -->
<path d="M36 35 Q32 20 38 16 Q40 24 38 30" fill="#cc2222" fill-opacity="0.7" stroke="#cc2222" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M64 35 Q68 20 62 16 Q60 24 62 30" fill="#cc2222" fill-opacity="0.7" stroke="#cc2222" stroke-width="1.5" stroke-linejoin="round"/>
<!-- Yeux (forme de flamme) -->
<path d="M40 50 Q44 44 48 50 Q44 56 40 50 Z" fill="#cc2222" opacity="0.9"/>
<path d="M52 50 Q56 44 60 50 Q56 56 52 50 Z" fill="#cc2222" opacity="0.9"/>
<!-- Pupilles -->
<ellipse cx="44" cy="50" rx="1.5" ry="2.5" fill="#101622"/>
<ellipse cx="56" cy="50" rx="1.5" ry="2.5" fill="#101622"/>
<!-- Nez aplati (démon) -->
<path d="M47 58 Q50 60 53 58" fill="none" stroke="#cc2222" stroke-width="2" stroke-linecap="round" opacity="0.7"/>
<!-- Bouche avec crocs -->
<path d="M38 66 Q50 74 62 66" fill="none" stroke="#cc2222" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
<!-- Crocs -->
<path d="M43 67 L42 73 L45 68" fill="#cc2222" opacity="0.7"/>
<path d="M57 67 L58 73 L55 68" fill="#cc2222" opacity="0.7"/>
<!-- Sourcils menaçants -->
<path d="M38 44 Q44 40 48 43" fill="none" stroke="#cc2222" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
<path d="M52 43 Q56 40 62 44" fill="none" stroke="#cc2222" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="dv-glow" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#ddaa00" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#ddaa00" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Fond -->
<circle cx="50" cy="50" r="48" fill="#101622" stroke="#1a2436" stroke-width="2"/>
<circle cx="50" cy="50" r="48" fill="url(#dv-glow)"/>
<!-- Rayons célestes (halo) -->
<line x1="50" y1="10" x2="50" y2="18" stroke="#ddaa00" stroke-width="2" opacity="0.6"/>
<line x1="68" y1="15" x2="64" y2="22" stroke="#ddaa00" stroke-width="2" opacity="0.6"/>
<line x1="80" y1="28" x2="74" y2="32" stroke="#ddaa00" stroke-width="2" opacity="0.6"/>
<line x1="32" y1="15" x2="36" y2="22" stroke="#ddaa00" stroke-width="2" opacity="0.6"/>
<line x1="20" y1="28" x2="26" y2="32" stroke="#ddaa00" stroke-width="2" opacity="0.6"/>
<line x1="86" y1="44" x2="80" y2="46" stroke="#ddaa00" stroke-width="1.5" opacity="0.5"/>
<line x1="14" y1="44" x2="20" y2="46" stroke="#ddaa00" stroke-width="1.5" opacity="0.5"/>
<!-- Halo circulaire doré -->
<circle cx="50" cy="36" r="14" fill="none" stroke="#ddaa00" stroke-width="2.5" opacity="0.8"/>
<circle cx="50" cy="36" r="16" fill="none" stroke="#ddaa00" stroke-width="0.8" opacity="0.4" stroke-dasharray="3,4"/>
<!-- Lotus (5 pétales) -->
<ellipse cx="50" cy="72" rx="8" ry="4" fill="#ddaa00" fill-opacity="0.6" transform="rotate(0,50,72)"/>
<ellipse cx="50" cy="72" rx="8" ry="4" fill="#ddaa00" fill-opacity="0.4" transform="rotate(36,50,72)"/>
<ellipse cx="50" cy="72" rx="8" ry="4" fill="#ddaa00" fill-opacity="0.4" transform="rotate(72,50,72)"/>
<ellipse cx="50" cy="72" rx="8" ry="4" fill="#ddaa00" fill-opacity="0.4" transform="rotate(108,50,72)"/>
<ellipse cx="50" cy="72" rx="8" ry="4" fill="#ddaa00" fill-opacity="0.4" transform="rotate(144,50,72)"/>
<!-- Cœur du lotus -->
<circle cx="50" cy="72" r="4" fill="#ddaa00" fill-opacity="0.8"/>
<!-- Silhouette divine — corps lumineux -->
<ellipse cx="50" cy="36" rx="8" ry="10" fill="#ddaa00" fill-opacity="0.25"/>
<!-- Corps stylisé (robe longue) -->
<path d="M44 44 Q40 58 42 72 Q50 68 58 72 Q60 58 56 44 Z"
fill="#ddaa00" fill-opacity="0.18" stroke="#ddaa00" stroke-width="1.5"/>
<!-- Mains en prière -->
<path d="M44 54 Q38 52 36 56 Q38 60 44 58" fill="#ddaa00" fill-opacity="0.3" stroke="#ddaa00" stroke-width="1.2"/>
<path d="M56 54 Q62 52 64 56 Q62 60 56 58" fill="#ddaa00" fill-opacity="0.3" stroke="#ddaa00" stroke-width="1.2"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="ea-glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#e8a030" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#e8a030" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Fond -->
<circle cx="50" cy="50" r="48" fill="#101622" stroke="#1a2436" stroke-width="2"/>
<circle cx="50" cy="50" r="48" fill="url(#ea-glow)"/>
<!-- Anneau extérieur -->
<circle cx="50" cy="50" r="42" fill="none" stroke="#e8a030" stroke-width="1.2" opacity="0.4"/>
<!-- Yin-Yang stylisé (transformation) -->
<!-- Demi-cercle yang (clair) -->
<path d="M50 18 A32 32 0 0 1 50 82 A16 16 0 0 0 50 50 A16 16 0 0 1 50 18 Z"
fill="#e8a030" fill-opacity="0.25" stroke="#e8a030" stroke-width="1.5"/>
<!-- Demi-cercle yin (sombre) -->
<path d="M50 18 A32 32 0 0 0 50 82 A16 16 0 0 1 50 50 A16 16 0 0 0 50 18 Z"
fill="#e8a030" fill-opacity="0.05" stroke="#e8a030" stroke-width="1.5"/>
<!-- Petits cercles yin-yang -->
<circle cx="50" cy="34" r="6" fill="#e8a030" fill-opacity="0.6"/>
<circle cx="50" cy="66" r="6" fill="#e8a030" fill-opacity="0.15" stroke="#e8a030" stroke-width="1.2"/>
<!-- Patte d'animal (5 coussinets) -->
<!-- Coussinet principal (paume) -->
<ellipse cx="50" cy="55" rx="9" ry="7" fill="#e8a030" fill-opacity="0.7"/>
<!-- 4 orteils -->
<ellipse cx="40" cy="44" rx="4" ry="3.5" fill="#e8a030" fill-opacity="0.7" transform="rotate(-15,40,44)"/>
<ellipse cx="45" cy="41" rx="4" ry="3.5" fill="#e8a030" fill-opacity="0.7" transform="rotate(-5,45,41)"/>
<ellipse cx="55" cy="41" rx="4" ry="3.5" fill="#e8a030" fill-opacity="0.7" transform="rotate(5,55,41)"/>
<ellipse cx="60" cy="44" rx="4" ry="3.5" fill="#e8a030" fill-opacity="0.7" transform="rotate(15,60,44)"/>
<!-- Griffes stylisées -->
<path d="M38 42 Q35 38 34 34" fill="none" stroke="#e8a030" stroke-width="1.8" stroke-linecap="round" opacity="0.8"/>
<path d="M43 39 Q42 35 42 31" fill="none" stroke="#e8a030" stroke-width="1.8" stroke-linecap="round" opacity="0.8"/>
<path d="M57 39 Q58 35 58 31" fill="none" stroke="#e8a030" stroke-width="1.8" stroke-linecap="round" opacity="0.8"/>
<path d="M62 42 Q65 38 66 34" fill="none" stroke="#e8a030" stroke-width="1.8" stroke-linecap="round" opacity="0.8"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="gh-glow" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#88ccee" stop-opacity="0.45"/>
<stop offset="100%" stop-color="#88ccee" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Fond -->
<circle cx="50" cy="50" r="48" fill="#101622" stroke="#1a2436" stroke-width="2"/>
<circle cx="50" cy="50" r="48" fill="url(#gh-glow)"/>
<!-- Silhouette fantôme — tête arrondie -->
<path d="M34 44 Q34 24 50 22 Q66 24 66 44 L66 68 Q62 64 58 68 Q55 72 52 68 Q49 64 50 68 Q47 72 44 68 Q40 64 36 68 Q34 64 34 68 Z"
fill="#88ccee" fill-opacity="0.15" stroke="#88ccee" stroke-width="2" stroke-linejoin="round"/>
<!-- Yeux fantôme — vides, inquiétants -->
<ellipse cx="43" cy="42" rx="4" ry="5" fill="#101622" stroke="#88ccee" stroke-width="1.5" opacity="0.9"/>
<ellipse cx="57" cy="42" rx="4" ry="5" fill="#101622" stroke="#88ccee" stroke-width="1.5" opacity="0.9"/>
<!-- Lueurs dans les yeux -->
<ellipse cx="43" cy="42" rx="1.5" ry="2" fill="#88ccee" opacity="0.5"/>
<ellipse cx="57" cy="42" rx="1.5" ry="2" fill="#88ccee" opacity="0.5"/>
<!-- Kanji 鬼 stylisé en filigrane (simplifié) -->
<!-- Traits horizontaux et verticaux évoquant le caractère -->
<line x1="40" y1="53" x2="60" y2="53" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<line x1="50" y1="53" x2="50" y2="62" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<path d="M42 58 Q50 55 58 58" fill="none" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<!-- Traînée vaporeuse en bas -->
<path d="M38 68 Q36 75 38 82 Q40 88 44 84 Q46 78 48 84 Q50 88 52 84 Q54 78 56 84 Q58 88 62 82 Q64 75 62 68"
fill="#88ccee" fill-opacity="0.08" stroke="#88ccee" stroke-width="1.2" stroke-dasharray="3,3" opacity="0.6"/>
<!-- Chaînes (lien au monde des vivants) — deux petits maillons -->
<circle cx="32" cy="52" r="3" fill="none" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<circle cx="32" cy="58" r="3" fill="none" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<line x1="32" y1="49" x2="32" y2="55" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<circle cx="68" cy="52" r="3" fill="none" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<circle cx="68" cy="58" r="3" fill="none" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
<line x1="68" y1="49" x2="68" y2="55" stroke="#88ccee" stroke-width="1.5" opacity="0.5"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1,47 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="jg-glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#22cc88" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#22cc88" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Fond -->
<circle cx="50" cy="50" r="48" fill="#101622" stroke="#1a2436" stroke-width="2"/>
<circle cx="50" cy="50" r="48" fill="url(#jg-glow)"/>
<!-- Cercle de transformation mystique -->
<circle cx="50" cy="50" r="38" fill="none" stroke="#22cc88" stroke-width="1.2" opacity="0.35" stroke-dasharray="4,3"/>
<!-- Silhouette multi-forme (créature hybride) -->
<!-- Corps central — humanoïde -->
<ellipse cx="50" cy="52" rx="12" ry="15" fill="#22cc88" fill-opacity="0.15" stroke="#22cc88" stroke-width="1.8"/>
<!-- Tête avec cornes/oreilles animales -->
<circle cx="50" cy="35" r="9" fill="#22cc88" fill-opacity="0.15" stroke="#22cc88" stroke-width="1.8"/>
<!-- Oreilles pointues (animal) -->
<path d="M41 30 L38 20 L45 28" fill="#22cc88" fill-opacity="0.5" stroke="#22cc88" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M59 30 L62 20 L55 28" fill="#22cc88" fill-opacity="0.5" stroke="#22cc88" stroke-width="1.5" stroke-linejoin="round"/>
<!-- Yeux (regard surnaturel) -->
<ellipse cx="46" cy="35" rx="3" ry="2" fill="#22cc88" opacity="0.8"/>
<ellipse cx="54" cy="35" rx="3" ry="2" fill="#22cc88" opacity="0.8"/>
<!-- Queue spiralée -->
<path d="M62 60 Q72 58 74 65 Q76 72 68 74 Q62 74 62 68"
fill="none" stroke="#22cc88" stroke-width="2" stroke-linecap="round" opacity="0.7"/>
<!-- Tentacule / membre supplémentaire gauche -->
<path d="M38 55 Q26 52 22 60 Q20 68 28 66"
fill="none" stroke="#22cc88" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
<!-- Écailles / motif sur le corps -->
<path d="M44 46 Q50 42 56 46 Q52 50 50 48 Q48 50 44 46 Z"
fill="#22cc88" fill-opacity="0.3" stroke="#22cc88" stroke-width="1"/>
<path d="M44 52 Q50 48 56 52 Q52 56 50 54 Q48 56 44 52 Z"
fill="#22cc88" fill-opacity="0.3" stroke="#22cc88" stroke-width="1"/>
<!-- Kanji 怪 (étrange) stylisé — simplifié -->
<text x="50" y="81" text-anchor="middle" font-size="11" font-family="serif"
fill="#22cc88" opacity="0.55"></text>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="mt-glow" cx="50%" cy="40%" r="50%">
<stop offset="0%" stop-color="#6688aa" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#6688aa" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Fond -->
<circle cx="50" cy="50" r="48" fill="#101622" stroke="#1a2436" stroke-width="2"/>
<circle cx="50" cy="50" r="48" fill="url(#mt-glow)"/>
<!-- Anneau ésotérique (cercle de protection) -->
<circle cx="50" cy="50" r="40" fill="none" stroke="#6688aa" stroke-width="1.2" opacity="0.4"/>
<circle cx="50" cy="50" r="38" fill="none" stroke="#6688aa" stroke-width="0.6" opacity="0.25" stroke-dasharray="5,4"/>
<!-- Silhouette humaine -->
<!-- Tête -->
<circle cx="50" cy="30" r="9" fill="#6688aa" fill-opacity="0.25" stroke="#6688aa" stroke-width="1.8"/>
<!-- Corps -->
<path d="M40 42 L36 66 L42 66 L45 56 L50 60 L55 56 L58 66 L64 66 L60 42 Z"
fill="#6688aa" fill-opacity="0.2" stroke="#6688aa" stroke-width="1.8" stroke-linejoin="round"/>
<!-- Bras gauche -->
<path d="M40 44 Q30 52 28 60" fill="none" stroke="#6688aa" stroke-width="2" stroke-linecap="round"/>
<!-- Bras droit (levé, tenant un talisman) -->
<path d="M60 44 Q70 48 72 42" fill="none" stroke="#6688aa" stroke-width="2" stroke-linecap="round"/>
<!-- Talisman / ofuda (papier de prière) -->
<rect x="68" y="32" width="10" height="14" rx="1"
fill="#6688aa" fill-opacity="0.2" stroke="#6688aa" stroke-width="1.5"/>
<!-- Lignes du talisman -->
<line x1="70" y1="36" x2="76" y2="36" stroke="#6688aa" stroke-width="1" opacity="0.7"/>
<line x1="70" y1="39" x2="76" y2="39" stroke="#6688aa" stroke-width="1" opacity="0.7"/>
<line x1="70" y1="42" x2="76" y2="42" stroke="#6688aa" stroke-width="1" opacity="0.7"/>
<!-- Symbole occulte sur la poitrine (trigramme Pa Kua simplifié) -->
<line x1="45" y1="46" x2="55" y2="46" stroke="#6688aa" stroke-width="1.5" opacity="0.6"/>
<line x1="45" y1="49" x2="55" y2="49" stroke="#6688aa" stroke-width="1.5" opacity="0.6"/>
<line x1="45" y1="52" x2="50" y2="52" stroke="#6688aa" stroke-width="1.5" opacity="0.6"/>
<line x1="52" y1="52" x2="55" y2="52" stroke="#6688aa" stroke-width="1.5" opacity="0.6"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB