app/frontend/shared/components/CommonIcon/usePrivateIcon.ts
// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
import { computed } from 'vue'
import type { Props } from './CommonIcon.vue'
import type { Animations, Sizes } from './types.ts'
export const usePrivateIcon = (
props: Omit<Props, 'size'> & { size: Sizes },
) => {
const animationClassMap: Record<Animations, string> = {
pulse: 'animate-pulse',
spin: 'animate-spin',
ping: 'animate-ping',
bounce: 'animate-bounce',
}
const sizeMap: Record<Sizes, number> = {
xs: 12,
tiny: 16,
small: 20,
base: 24,
medium: 32,
large: 48,
xl: 96,
}
const iconClass = computed(() => {
let className = `icon-${props.name}`
// by default, always spin the spinner
const animation = props.animation || (props.name === 'spinner' && 'spin')
if (animation) {
className += ` ${animationClassMap[animation]}`
}
return className
})
const finalSize = computed(() => {
if (props.fixedSize) return props.fixedSize
return {
width: sizeMap[props.size],
height: sizeMap[props.size],
}
})
return {
iconClass,
finalSize,
}
}