Standardize photo entity icons

src/admin/AdminRecipeBadge.tsx

@@ -15,7 +15,6 @@ export default function AdminRecipeBadge({
   const renderBadgeContent = () =>
     <div className={clsx(
       'inline-flex items-center gap-2',
-      'translate-y-[1.5px]',
     )}>
       <PhotoRecipe {...{ recipe }} />
       <div className="text-dim uppercase">
@@ -32,4 +31,4 @@ export default function AdminRecipeBadge({
       ? renderBadgeContent()
       : <Badge className="py-[3px]!">{renderBadgeContent()}</Badge>
   );
-}
+}

src/camera/PhotoCamera.tsx

@@ -35,7 +35,7 @@ export default function PhotoCamera({
         />
         : <TbCamera
           size={15}
-          className="translate-x-[-0.5px] translate-y-[1px]"
+          className="translate-x-[-0.5px]"
         />}
       type={type}
       className={className}

src/components/primitives/EntityLink.tsx

@@ -29,6 +29,7 @@ export default function EntityLink({
   hoverEntity,
   truncate = true,
   className,
+  classNameIcon,
   debug,
 }: {
   icon: ReactNode
@@ -41,6 +42,7 @@ export default function EntityLink({
   hoverEntity?: ReactNode
   truncate?: boolean
   className?: string
+  classNameIcon?: string
   debug?: boolean
 } & EntityLinkExternalProps) {
   const classForContrast = () => {
@@ -85,6 +87,7 @@ export default function EntityLink({
             className: clsx(
               classForContrast(),
               href && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
+              classNameIcon,
             ),
             debug,
           }}>

src/components/primitives/Icon.tsx

@@ -19,7 +19,7 @@ export default function Icon({
 }) {
   return (
     <span className={clsx(
-      'h-[18px]',
+      'h-[1rem] *:translate-y-[2.5px]',
       wide ? 'w-[28px]' : 'w-[14px]',
       'inline-flex items-center justify-center',
       debug && 'bg-gray-300 dark:bg-gray-700',

src/components/primitives/LabeledIcon.tsx

@@ -11,7 +11,8 @@ export type LabeledIconType =
 export default function LabeledIcon({
   icon,
   type = 'icon-first',
-  className: classNameProp,
+  className,
+  classNameIcon,
   children,
   iconWide,
   debug,
@@ -19,6 +20,7 @@ export default function LabeledIcon({
   icon?: ReactNode,
   type?: LabeledIconType,
   className?: string,
+  classNameIcon?: string,
   children: ReactNode,
   iconWide?:boolean,
   debug?: boolean,
@@ -26,12 +28,15 @@ export default function LabeledIcon({
   return (
     <span className={ clsx(
       'inline-flex gap-x-1.5 md:gap-x-2 min-w-0',
-      classNameProp,
+      className,
       debug && 'border border-green-500 m-[-1px]',
     )}>
       {icon && type !== 'text-only' &&
         <Icon {...{
-          className: clsx(type === 'icon-last' && 'order-1'),
+          className: clsx(
+            type === 'icon-last' && 'order-1',
+            classNameIcon,
+          ),
           wide: iconWide,
           debug,
         }}>

src/lens/PhotoLens.tsx

@@ -22,7 +22,9 @@ export default function PhotoLens({
     <EntityLink
       label={formatLensText(lens)}
       href={pathForLens(lens)}
-      icon={<TbCone className="rotate-[270deg] translate-x-[-1px]" />}
+      icon={<TbCone
+        className="rotate-[270deg] translate-x-[-0.5px]"
+      />}
       type={type}
       className={className}
       badged={badged}

src/recipe/PhotoRecipe.tsx

@@ -36,7 +36,7 @@ export default function PhotoRecipe({
           className={clsx(
             badged
               ? 'translate-x-[-1px] translate-y-[0.5px]'
-              : 'translate-y-[0.5px]',
+              : 'translate-y-[-0.5px]',
           )}
         />}
         className={className}

src/simulation/PhotoFilmSimulation.tsx

@@ -30,7 +30,12 @@ export default function PhotoFilmSimulation({
       href={pathForFilmSimulation(simulation)}
       icon={<PhotoFilmSimulationIcon
         simulation={simulation}
-        className={clsx(contrast === 'frosted' && 'text-black')}
+        className={clsx(
+          contrast === 'frosted' && 'text-black',
+          type === 'icon-only'
+            ? 'translate-y-[-2.5px]'
+            : 'translate-y-[-1px]',
+        )}
       />}
       title={`Film Simulation: ${large}`}
       type={type}

src/tag/PhotoTag.tsx

@@ -1,9 +1,9 @@
 import { pathForTag } from '@/app/paths';
-import { FaTag } from 'react-icons/fa';
 import { formatTag } from '.';
 import EntityLink, {
   EntityLinkExternalProps,
 } from '@/components/primitives/EntityLink';
+import { FiTag } from 'react-icons/fi';
 
 export default function PhotoTag({
   tag,
@@ -21,10 +21,7 @@ export default function PhotoTag({
     <EntityLink
       label={formatTag(tag)}
       href={pathForTag(tag)}
-      icon={<FaTag
+      icon={<FiTag size={14} className="translate-x-[0.5px]" />}
-        size={11}
-        className="translate-y-[0.5px]"
-      />}
       type={type}
       className={className}
       badged={badged}