Symbolleiste professioneller gestaltet: echte SVG-Icons statt Unicode/Emoji

Neue ToolbarIcon.vue (hand-gezeichnete Strich-Icons: Einstellungen, Rückgängig/
Wiederholen, Tabelle/Diagramm/Text einfügen, Benannte Bereiche) ersetzt die
bisherigen ⚙ ↶ ↷ ▦ ▤ ¶ 🏷 Glyphen. Buttons sind jetzt in dezente,
segmentierte Gruppen ("Pills") statt einzeln umrandeter Kästchen mit dünnen
Trennstrichen gefasst, mit Ghost-Stil in Ruhe und Hover-/Aktiv-Zuständen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
wkh
2026-09-09 07:59:42 +02:00
co-authored by Claude Sonnet 5
parent 40adaa2e1c
commit 10efd6af2f
3 changed files with 204 additions and 78 deletions
+88
View File
@@ -0,0 +1,88 @@
<script setup lang="ts">
/**
* Small hand-drawn line-icon set for the toolbar (no icon library/font —
* consistent with this project's "nothing off the shelf" approach). One
* shared <svg> shell (24x24, stroke-only) with a name-keyed set of shapes,
* since every icon needs the exact same viewBox/stroke setup and only the
* inner geometry differs.
*/
export type ToolbarIconName =
| 'settings'
| 'undo'
| 'redo'
| 'table'
| 'chart'
| 'text'
| 'tag';
defineProps<{ name: ToolbarIconName }>();
</script>
<template>
<svg
class="ti"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<template v-if="name === 'settings'">
<line x1="3" y1="6" x2="21" y2="6" />
<circle cx="9" cy="6" r="2" fill="currentColor" />
<line x1="3" y1="12" x2="21" y2="12" />
<circle cx="15" cy="12" r="2" fill="currentColor" />
<line x1="3" y1="18" x2="21" y2="18" />
<circle cx="7" cy="18" r="2" fill="currentColor" />
</template>
<template v-else-if="name === 'undo'">
<path d="M7 10 H15 a4 4 0 0 1 0 8 h-3" />
<polyline points="7 10 11 6" />
<polyline points="7 10 11 14" />
</template>
<template v-else-if="name === 'redo'">
<path d="M17 10 H9 a4 4 0 0 0 0 8 h3" />
<polyline points="17 10 13 6" />
<polyline points="17 10 13 14" />
</template>
<template v-else-if="name === 'table'">
<rect x="3" y="4" width="18" height="16" rx="2" />
<line x1="3" y1="10" x2="21" y2="10" />
<line x1="3" y1="16" x2="21" y2="16" />
<line x1="9" y1="4" x2="9" y2="20" />
<line x1="15" y1="4" x2="15" y2="20" />
</template>
<template v-else-if="name === 'chart'">
<line x1="4" y1="20" x2="20" y2="20" />
<rect x="6" y="13" width="3" height="7" />
<rect x="11" y="9" width="3" height="11" />
<rect x="16" y="5" width="3" height="15" />
</template>
<template v-else-if="name === 'text'">
<rect x="4" y="4" width="16" height="16" rx="2" />
<line x1="7" y1="9" x2="17" y2="9" />
<line x1="7" y1="13" x2="17" y2="13" />
<line x1="7" y1="17" x2="13" y2="17" />
</template>
<template v-else-if="name === 'tag'">
<polygon points="4,5 14,5 20,11 14,17 4,17" />
<circle cx="9" cy="9" r="1.6" fill="currentColor" />
</template>
</svg>
</template>
<style scoped>
.ti {
width: 17px;
height: 17px;
display: block;
}
</style>