# draw图标

## 规则（Rules）

# 图标绘制规范

## 1. 矢量格式

必须使用SVG格式，禁止使用位图。

✅ 使用 `<svg>` 标签绘制矢量图标
❌ 使用PNG/JPG图片代替

## 2. 风格统一

同一项目的图标风格必须统一（线条粗细、圆角半径、配色方案一致）。

✅ 所有图标stroke-width=2，圆角=4px
❌ 部分图标粗线条，部分细线条

## 3. viewBox必填

每个SVG必须包含 viewBox 定义。

✅ `<svg viewBox="0 0 24 24" xmlns="...">`
❌ `<svg>` 没有viewBox

## 4. 渲染验证

交付前必须在浏览器中打开确认渲染正常。

✅ 保存后打开浏览器查看是否显示正确
❌ 写完SVG代码直接交付

## 方法（Methods）

# 图标绘制方法

## 步骤

### 1. 分析需求
分析设计规范，确定图标用途、风格和尺寸。

### 2. 设计图标
编写SVG代码绘制图标。

基本模板：
```svg
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v8M8 12h8"/>
</svg>
```

### 3. 优化调整
检查SVG代码，调整视觉平衡。

### 4. 渲染验证
在浏览器中打开确认SVG渲染正常。

## 技巧（Tips）

# 图标绘制技巧

## 1. 使用标准SVG元素

优先使用 `<path>`、`<circle>`、`<rect>` 等标准元素，避免使用复杂的滤镜。

## 2. 常见问题

| 问题 | 原因 | 解决 |
|------|------|------|
| SVG渲染空白 | 缺少viewBox或坐标超出 | 检查viewBox和元素坐标 |
| 图标风格不统一 | 未统一stroke-width | 统一使用相同线条粗细 |
| 颜色与设计规范不符 | 未使用规范中的色值 | 使用规范中定义的HEX色值 |