BrutalShape 图腾
以纯 SVG 内联渲染的粗野主义装饰图腾库，为卡片、标题、按钮等宿主元素提供压角贴纸、印章徽记与 HUD 标定视觉。全部图形走 fill/stroke 继承注入，默认引用语义令牌，自动联动主题预设与暗色模式。
预览
五类图腾总览
爆炸多角星 Burst
工业图章 Seal
HUD 标定十字 Crosshair
8-Bit 像素 Pixel
符号图腾 Glyph
尺寸与配色定制
压角贴纸装饰（配合绝对定位）
Limited Edition
图腾作为装饰性 SVG 默认对读屏隐藏（decorative），可自由叠加在卡片、标题或按钮上， pointer-events 已禁用，不会干扰宿主交互。
安装
pnpm dlx brutx-vue@latest add brutal-shape用法
基础图腾
通过 name 选择图腾，size 控制渲染边长（px）。
<script setup>
import { BrutalShape } from 'brutx-ui-vue'
</script>
<template>
<BrutalShape name="star-8" :size="44" />
</template>配色与描边定制
color 与 stroke 接受任意 CSS 颜色值；将 color 设为 transparent 并加大 strokeWidth 可得到线框形态。
<template>
<!-- 实底填充 + 硬描边 -->
<BrutalShape name="lightning" :size="48" color="var(--brutal-primary)" stroke="var(--brutal-primary)" />
<!-- 线框形态 -->
<BrutalShape name="diamond" :size="48" color="transparent" stroke="var(--brutal-fg)" :stroke-width="6" />
</template>压角贴纸
配合绝对定位实现贴纸压角效果。组件根已声明 pointer-events-none，不会干扰宿主交互。
<template>
<div class="relative border-3 border-brutal p-6">
<BrutalShape
name="seal-badge"
:size="52"
class="absolute -right-4 -top-4 rotate-12"
/>
<h4>Limited Edition</h4>
</div>
</template>图腾清单
| 分类 | 名称 |
|---|---|
| 爆炸多角星 Burst | star-4 · star-5 · star-6 · star-8 · star-12 · star-16 |
| 工业图章 Seal | seal-saw-16 · seal-cog-8 · seal-scallop-8 · seal-badge |
| HUD 标定十字 Crosshair | crosshair-plus · crosshair-target · crosshair-corner |
| 8-Bit 像素 Pixel | pixel-burst · pixel-heart · pixel-spark |
| 符号图腾 Glyph | lightning · heart · skull · thumb · diamond |
传入未知名称时组件跳过渲染并在控制台输出警告。
API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | — | 图腾库中的图形名称，见正文图腾清单；未知名称会跳过 SVG 渲染并输出警告。 |
详情 | |||
size | string | number | undefined | 32 | 同时设置 SVG 的宽度和高度；数值按像素解释，字符串直接传给 SVG 尺寸属性。 |
详情声明类型string | number | undefined 默认值详情
来源packages/ui/src/components/brutal-shape/BrutalShape.vue | |||
color | string | undefined | "var(--brutal-accent, #FFE66D)" | SVG 填充色；默认使用强调色语义令牌，随主题变化。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/brutal-shape/BrutalShape.vue | |||
stroke | string | undefined | "var(--brutal-fg, #000000)" | SVG 描边色；默认使用前景色语义令牌。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/brutal-shape/BrutalShape.vue | |||
strokeWidth | string | number | undefined | 3 | SVG 描边宽度，以 viewBox 的 100 单位坐标系计量。 |
详情声明类型string | number | undefined 默认值详情
来源packages/ui/src/components/brutal-shape/BrutalShape.vue | |||
decorative | boolean | undefined | true | 为真时通过 aria-hidden 对辅助技术隐藏图形；作为语义图形使用时设为假并由父级提供文本替代。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/brutal-shape/BrutalShape.vue | |||
class | string | undefined | undefined | 合并到 SVG 根元素的自定义 CSS 类，可用于旋转或定位。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/brutal-shape/BrutalShape.vue | |||
可访问性
- 装饰语义：默认
decorative对读屏隐藏；当图腾承担信息传达职责时传:decorative="false"并由父级提供文本替代。 - 交互无扰：根元素
pointer-events-none，悬浮/点击事件完全穿透到宿主。 - 动效无关：本体是静态矢量图形，旋转、缩放等变换由使用方通过类名控制，尊重全局 reduced-motion 策略。