Icon styling in Tailwind/React

Question

This is a React icon component, with a few Tailwind classes. This icon component looks as follows in the UI. The name LongIcon is to differentiate with smaller, fully round icons that are used elsewhere.

Normal: enter image description here

Hovered: enter image description here

I'm using flex to center the icon SVG inside the green background.

import Image from 'next/image';
import React from 'react';
export default function LongIcon({ type }: { type: string }) {
 return (
 // flex used to center the type icon inside the colored div
 <div className={`
 ${type}
 h-[30px]
 w-[80px]
 p-1
 flex
 justify-between
 rounded-md
 transition-all
 hover:saturate-200
 hover:scale-110`}
 >
 {/* Capitalize type */}
 <span className='text-white font-medium'>{type.replace(/\b\w/, c => c.toUpperCase())}</span>
 <Image
 src={`/type-icons/${type}.svg`}
 alt={type}
 title={type}
 width={30 * 0.6}
 height={30 * 0.6}
 />
 </div>
 );
}

Answer 1

I have two main observations:

I'm not a big fan of the baked-in capitalization. For one, even in English title case not all words should be capitalized. And if the application is ever translated there are languages in which title case may be inappropriate. In my opinion the label should be capitalized correctly to begin with.

If you do keep it, you should consider using the CSS style text-transformation: capitalize (Tailwind class capitalize) instead, or at the very least define it as a separate function outside the component to make the HTML less busy.

---

Hover effects usually suggest to the user that the element is clickable. Since this component otherwise doesn't seem interactive, this may be confusing for the user.