跳至主要內容

图标注册

大约 2 分钟

图标注册

WebCAD 使用 SVG 图标，支持通过 IconRegistry 注册自定义图标。

IconRegistry 使用

import { IconRegistry } from 'vjcad';

const iconRegistry = IconRegistry.getInstance();

// 注册SVG图标
iconRegistry.registerIcon('my-line-icon', `
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="4" y1="20" x2="20" y2="4"/>
  </svg>
`);

iconRegistry.registerIcon('my-circle-icon', `
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="8"/>
  </svg>
`);

// 带填充的图标
iconRegistry.registerIcon('my-filled-icon', `
  <svg viewBox="0 0 24 24">
    <rect x="4" y="4" width="16" height="16" fill="currentColor"/>
  </svg>
`);

获取和检查图标

// 获取图标
const svg = iconRegistry.getIcon('my-line-icon');

// 检查图标是否存在
if (iconRegistry.hasIcon('my-icon')) {
  // ...
}

// 取消注册
iconRegistry.unregisterIcon('my-line-icon');

IconRegistry API

方法说明
getInstance()获取单例
registerIcon(name, svg)注册图标
unregisterIcon(name)取消注册
getIcon(name)获取图标SVG
hasIcon(name)检查是否存在

图标设计规范

viewBox

建议使用 0 0 24 24：

<svg viewBox="0 0 24 24">
  ...
</svg>

颜色

使用 currentColor 以支持主题：

<!-- 线条图标 -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="4" y1="20" x2="20" y2="4"/>
</svg>

<!-- 填充图标 -->
<svg viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="16" fill="currentColor"/>
</svg>

线宽

建议使用 stroke-width="2"。

图标示例

直线图标

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="4" y1="20" x2="20" y2="4"/>
</svg>

圆图标

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="8"/>
</svg>

矩形图标

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <rect x="4" y="4" width="16" height="16"/>
</svg>

多边形图标

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <polygon points="12,2 22,22 2,22"/>
</svg>

带中心线的圆

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="8"/>
  <line x1="4" y1="12" x2="20" y2="12" stroke-dasharray="2,2"/>
  <line x1="12" y1="4" x2="12" y2="20" stroke-dasharray="2,2"/>
</svg>

移动图标

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="12" y1="4" x2="12" y2="20"/>
  <line x1="4" y1="12" x2="20" y2="12"/>
  <polyline points="8,8 12,4 16,8"/>
  <polyline points="8,16 12,20 16,16"/>
  <polyline points="8,8 4,12 8,16"/>
  <polyline points="16,8 20,12 16,16"/>
</svg>

在插件中使用

async onActivate(context: PluginContext): Promise<void> {
  // 注册图标
  context.registerIcon('MY_TOOL', `
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="8"/>
    </svg>
  `);
  
  // 在Ribbon按钮中使用
  context.addRibbonButton('home', 'draw', {
    cmd: 'MYTOOL',
    label: '我的工具',
    icon: 'MY_TOOL'  // 引用注册的图标
  }, 'primary');
}

注意事项

  1. 图标名称唯一，避免与内置图标冲突
  2. 使用 currentColor，支持亮/暗主题
  3. 保持简洁，避免过于复杂的路径
  4. 统一 viewBox，建议 24x24
  5. 适当线宽，建议 stroke-width="2"

下一步