type StyleType = 'solid' | 'regular' | 'light' | 'thin' | 'duotone' | 'brands' | 'sharp'; export const FontAwesomeIconProps = { /** icon name * @link: https://fontawesome.com/icons */ name: { type: String, required: true, }, /** icon 风格 * 不同风格对应不同的css, 使用时请加载相应的css */ mode: { type: String, default: 'solid', validator(value: string) { // The value must match one of these strings return ['solid', 'regular', 'light', 'thin', 'duotone', 'brands'].includes(value); }, }, /** icon sharp * 对应sharp css */ sharp: { type: Boolean, default: false, }, /** * icon sizing * @description 2xs-xs-sm-lg-xl-2xl 1-10x */ frameSize: { type: String, }, /** * icon size * @description 大小 单位 rpx */ size: { type: Number, }, /** * icon color * @description 图标颜色 */ color: { type: String, }, /** * icon color * @description 背景色 */ bgColor: { type: String, }, /** icon border * @description 边框 */ border: { type: Boolean, default: false, }, /** icon rotate * @description 旋转角度 */ rotate: { type: Number, default: 0, }, /** icon reverse * @description 对称翻转 */ reverse: { type: String, validator(value: string) { // The value must match one of these strings return ['horizontal', 'vertical', 'both'].includes(value); }, }, /** * icon beat * @description 缩放动画 * @param duration Number 时间 s * @param scale Number 比例 */ beat: { type: Boolean, default: false, }, /** * icon duration * @description 动画持续时间(所有动画使用) s */ duration: { type: Number, default: 1, }, /** * icon scale * @description 动画比例(跳动动画使用) */ scale: { type: Number, default: 1.25, }, /** * icon fade * @description 淡入淡出动画 */ fade: { type: Boolean, default: false, }, /** * icon opacity * @description 透明度值 (淡入淡出动画使用) */ opacity: { type: Number, default: 0.6, }, /** * icon bounce * @description 弹跳动画 */ bounce: { type: Boolean, default: false, }, /** * icon bounceConfig * @description 弹跳动画属性设置 */ bounceConfig: { type: Object, default: () => { return { // 设置图标在跳跃后着陆时的反弹量 rebound: '-0.125em', // 设置图标弹跳时跳到的最大高度 height: '-0.5em', // 设置图标开始反弹时的水平失真(“挤压”) startScaleX: '1.1', // 将图标的水平失真(“挤压”)设置在跳转的顶部 startScaleY: '0.9', // 将图标的水平失真(“挤压”)设置在跳转的顶部 jumpScaleX: '0.9', // 将图标的垂直失真(“挤压”)设置在跳转的顶部 jumpScaleY: '1.1', // 设置跳跃后着陆时图标的水平失真(“挤压”) landScaleX: '1.05', // 设置跳跃后着陆时图标的垂直失真(“挤压”) landScaleY: '0.95', }; }, }, /** * icon flip * @description 翻转动画 */ flip: { type: Boolean, default: false, }, /** * icon flipConfig * @description 翻转动画属性设置 */ flipConfig: { type: Object, default: () => { return { // 设置表示旋转轴的矢量的 x 坐标(0~1) x: '0', // 设置矢量的 y 坐标,表示旋转轴(0~1) y: '1', // 设置矢量的 z 坐标,表示旋转轴(0~1) z: '0', // 设置翻转的旋转角度。正角表示顺时针旋转,负角表示逆时针旋转。 angle: '-180deg', }; }, }, };