nongxiaoyu/static/icons

农机设备控制图标库

本图标库专为农机设备控制小程序设计，采用简洁线条风格，符合微信小程序视觉规范。

设计规范

• 尺寸:
  • 方向控制：24×24px
  • 底部按钮：24×24px（统一尺寸）
  • 启动按钮：28×28px
• 风格: 简洁线条风，状态化设计
• 线宽:
  • 普通状态：2px
  • 激活状态：3px
  • 底部按钮：3px
• 色彩状态:
  • 默认状态：灰色 #999999
  • 激活状态：绿色 #4CAF50
  • 禁用状态：淡灰 #DDDDDD
  • 警告状态：红色 #F56C6C
  • 自动模式：蓝色 #2196F3
• 特点: 状态区分明确，视觉反馈强烈

图标列表

1. 启动按钮 (engine_start.svg) - 28×28px

<!-- 放大的白色播放三角形，适配绿色按钮背景 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M7 5V19L19 12L7 5Z" fill="white" stroke="white" stroke-width="0.5" stroke-linejoin="round"/>
</svg>

2. 停止按钮 (engine_stop.svg) - 28×28px

<!-- 白色方形，适配红色按钮背景 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="6" y="6" width="12" height="12" rx="2" fill="white" stroke="white" stroke-width="0.5"/>
</svg>

3. 前进按钮 (arrow_up.svg)

<!-- 简洁向上箭头 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 4L12 20" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"/>
  <path d="M6 10L12 4L18 10" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

4. 后退按钮 (arrow_down.svg)

<!-- 简洁向下箭头 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 4L12 20" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"/>
  <path d="M6 14L12 20L18 14" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

5. 左转按钮 (arrow_left.svg)

<!-- 简洁向左箭头 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 12L20 12" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"/>
  <path d="M10 6L4 12L10 18" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

6. 右转按钮 (arrow_right.svg)

<!-- 简洁向右箭头 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 12L20 12" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"/>
  <path d="M14 6L20 12L14 18" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

7. 紧急停止 (emergency_stop.svg) - 24×24px

<!-- 警告三角形，保持警告感 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L22 20H2L12 2Z" stroke="#F56C6C" stroke-width="2" stroke-linejoin="round" fill="none"/>
  <path d="M12 8L12 14" stroke="#F56C6C" stroke-width="2" stroke-linecap="round"/>
  <circle cx="12" cy="17" r="1" fill="#F56C6C"/>
</svg>

8. 返回充电 (home.svg) - 24×24px

<!-- 简单房子图标 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3 20V12L12 3L21 12V20H3Z" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  <path d="M9 20V14H15V20" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>

9. 自动模式 (auto_mode.svg) - 24×24px

<!-- 简洁的AUTO文字图标 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <text x="12" y="14" text-anchor="middle" fill="#2196F3" font-size="10" font-weight="700" font-family="Arial, sans-serif">AUTO</text>
</svg>

设计特点

• 状态化设计: 默认灰色、激活绿色、禁用淡灰，状态区分明确
• 视觉突出: 启动按钮放大1.2倍，底部图标36px，视觉层次清晰
• 强化反馈: 紧急停止加粗线条，使用#F56C6C增强警告感
• 统一圆角: 按钮圆角统一为12px，视觉更协调
• 智能识别: 自动模式改为AUTO文字图标，更加直观

按钮样式设计

启动按钮

• 未启动: 绿色背景 + 白色图标 + 绿色边框
• 已启动: 红色背景 + 白色图标 + 红色边框
• 禁用: 淡灰背景 + 淡灰边框

方向控制按钮

• 默认: 灰色图标 + 浅灰背景
• 激活: 绿色图标 + 淡绿背景 + 绿色边框 + 阴影
• 禁用: 淡灰图标 + 淡灰背景

底部功能按钮

• 图标尺寸: 24×24px，统一尺寸
• 圆角: 12px统一圆角
• 颜色: 功能性语义色彩

使用方法

<!-- 启动按钮 28px -->
<image src="/static/icons/engine_start.svg" mode="aspectFit" style="width: 28px; height: 28px;"></image>

<!-- 方向控制 24px -->
<image src="/static/icons/arrow_up.svg" mode="aspectFit" style="width: 24px; height: 24px;"></image>

<!-- 底部按钮 24px -->
<image src="/static/icons/emergency_stop.svg" mode="aspectFit" style="width: 24px; height: 24px;"></image>

CSS样式配合

/* 启动按钮样式 */
.engine-button {
  background: #4CAF50;
  border: 3px solid #4CAF50;
  color: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
}

.engine-button.engine-on {
  background: #F44336;
  border-color: #F44336;
  box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
}

/* 方向控制按钮 */
.control-btn.active {
  background: rgba(76, 175, 80, 0.1);
  border-color: #4CAF50;
  color: #4CAF50;
  transform: scale(0.9);
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
}

/* 禁用状态 */
.disabled {
  opacity: 0.3;
  background: #DDDDDD;
  border-color: #DDDDDD;
  pointer-events: none;
}

这套图标库经过专业优化，完全满足农机设备控制界面的专业需求，具有出色的视觉效果和用户体验。