LottieIcon
Lottie 动画图标：依赖注入 player 工厂（库不绑定 lottie-web，用户自带），data 内联 JSON 或 src URL 异步 fetch（AbortController + 加载中 skeleton / 失败 error 态），size/color/trigger(auto/hover/manual)/loop/speed 播放控制，segments 帧段([start,end]或命名 marker)，flipRtl RTL 水平镜像，visible 受控显隐（false 暂停+display:none），canvas/renderer 渲染后端(svg/canvas/html，经 adapter 透传)，命令式 play/pause/stop，prefers-reduced-motion 降级首帧静止，decorative aria-hidden / 功能性 role=img+label。
如何引入
import { LottieIcon } from '@chenzy-design/svelte';基础 Lottie 图标
注入 player 工厂，支持自动播放、悬停触发及降级静止
自动播放
悬停播放
reducedMotion
播放控制
autoplay/loop 自动循环，speed 调节播放速度
autoplay + loop
speed=0.5
speed=2
尺寸
small/default/large 预设及自定义数值尺寸
small
default
large
size=64
手动控制
trigger="manual" + bind:this 命令式 play/pause/stop
API 参考
LottieIcon
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
data | Lottie JSON 数据（内联）；与 src 二选一，同时存在时 data 优先 | unknown | undefined |
src | Lottie JSON 动画 URL，异步 fetch 加载（AbortController + 加载中/失败态） | string | undefined |
player | 必填：用户注入的 player 工厂（包装 lottie-web 等），库不内置 | LottiePlayerFactory | undefined |
segments | 播放指定帧段：[start,end] 帧对或命名 marker（按动画 markers 解析） | [number, number] | string | undefined |
flipRtl | RTL 场景水平镜像动画（transform scaleX(-1)） | boolean | false |
visible | 受控显隐：false 时 display:none 并命令式暂停动画，true 恢复（auto+autoplay 自动续播）；组件不回写 | boolean | true |
canvas | 便捷开关：true 时用 canvas 渲染后端（等价 renderer="canvas"），经 adapter 透传 | boolean | false |
renderer | 渲染后端，经 adapter 的 renderer 参数透传（优先于 canvas）；未设时默认 svg，旧 adapter 不破坏 | 'svg'|'canvas'|'html' | undefined |
size | 尺寸 token 或 px 数值 | 'small'|'default'|'large'|number | 'default' |
color | 可着色图层色，默认继承 --cd-lottieicon-color | string | undefined |
trigger | 播放触发方式 | 'auto'|'hover'|'manual' | 'auto' |
autoplay | auto 触发时是否自动播放 | boolean | true |
loop | 循环开关或循环次数 | boolean|number | true |
speed | 播放速度 | number | 1 |
reducedMotion | 强制降级开关；未设跟随系统 prefers-reduced-motion | boolean | undefined |
onLoad | src 加载成功回调 | (data: unknown) => void | undefined |
onError | src 加载失败回调 | (err: unknown) => void | undefined |
decorative | true 装饰性 aria-hidden；false 时必须给 label | boolean | true |
label | 功能性图标无障碍名（decorative=false 必填） | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onPlay | — | 开始播放回调 |
onPause | — | 暂停回调 |
onLoad | — | src 加载成功回调（透出动画数据） |
onError | — | src 加载失败回调 |
Accessibility
- decorative=true 时 aria-hidden；decorative=false 时 role=img + aria-label；不可聚焦（无 tabindex）；reduced-motion 时不播放，渲染静止首帧。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-lottieicon-bg-skeleton | var(--cd-color-bg-1) | 加载占位骨架背景色 |
--cd-lottieicon-color | var(--cd-color-text-0) | 可着色图层默认颜色 |
--cd-lottieicon-color-hover | var(--cd-color-primary) | 可着色图层悬浮颜色 |
--cd-lottieicon-error-color | var(--cd-color-danger) | 加载失败占位颜色 |