图标动画按钮（5 款 SVG 图标交互动效）

效果演示（真实可交互）

图标是按钮最好的视觉反馈载体：箭头右滑提示「还有下一步」、下载箭头抖动暗示文件即将落下、心形点赞会填充变红并弹跳（点击可切换点赞状态）、纸飞机悬停时飞起、刷新按钮持续旋转。所有图标均为内联 SVG，不依赖任何图标库。

完整代码

① 箭头右滑按钮：

<button class="btn-icon">
  <span>下一步</span>
  <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>

.btn-icon { display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #e2e8f5; background: #fff; color: #33406b;
  padding: 11px 22px; border-radius: 12px; cursor: pointer; font-weight: 600;
  transition: all .25s ease; }
.btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease; }
.btn-icon:hover { border-color: #6c8cff; color: #6c8cff; transform: translateY(-2px); }
.btn-icon:hover svg { transform: translateX(5px); }

③ 心形点赞（带 JS 状态切换）：

.btn-heart.liked { color: #ff6b8a; border-color: #ffc2d2; background: #fff5f7; }
.btn-heart.liked svg { fill: #ff6b8a; stroke: #ff6b8a;
  animation: pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

const heart = document.querySelector('.btn-heart');
heart.addEventListener('click', () => {
  const liked = heart.classList.toggle('liked');
  heart.setAttribute('aria-pressed', String(liked));
});

②④⑤ 款（下载、纸飞机、刷新）的动画原理相同：悬停时对 <svg> 或其子路径施加 transform / 旋转动画，完整样式见演示区 .ia-* 系列。SVG 使用 stroke: currentColor，图标颜色自动跟随按钮文字色。

参数说明

兼容性与性能

• 内联 SVG 无网络请求，比图标字体更清晰、可独立着色，兼容所有现代浏览器
• 动画全部使用 transform / opacity（GPU 加速），60fps 流畅
• 心形弹跳依赖 class 切换，纯 CSS 实现，JS 仅 5 行负责状态与无障碍属性
• 大量按钮同屏时，暂停态的动画（悬停触发）不占资源，性能无忧

常见问题

Q: 能商用吗？ 可以。本组件与图标均为粤喵自研，免费商用无需署名。

Q: 图标颜色不跟随文字？ 检查 stroke 是否写死颜色。写成 stroke: currentColor 后，图标会自动继承按钮的 color 属性。

Q: 想要线性图标变成实心怎么办？ 把 fill: none 改成 fill: currentColor，同时 stroke: none，视觉即刻切换为实心风格。

Q: 点赞后刷新页面状态丢失？ 把 liked 状态存到 localStorage，页面加载时读回并恢复 class 与 aria-pressed，即可实现持久化。