refactor: standardize icon component props

apps/web/src/components/icons/brand.tsx

@@ -1,4 +1,6 @@
-export function OcVercelIcon({ className }: { className?: string }) {
+import type { IconProps } from "./types";
+
+export function OcVercelIcon({ className }: IconProps) {
 	return (
 		<svg
 			className={className}
@@ -17,10 +19,7 @@ export function OcVercelIcon({ className }: { className?: string }) {
 export function OcMarbleIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -43,10 +42,7 @@ export function OcMarbleIcon({
 export function OcDataBuddyIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

apps/web/src/components/icons/types.ts

@@ -0,0 +1,5 @@
+export interface IconProps {
+  size?: number;
+  className?: string;
+  strokeWidth?: number;
+}

apps/web/src/components/icons/ui.tsx

@@ -1,10 +1,9 @@
+import type { IconProps } from "./types";
+
 export function OcVideoIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={size}
@@ -34,10 +33,7 @@ export function OcVideoIcon({
 export function OcCheckerboardIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={size}
@@ -68,10 +64,7 @@ export function OcCheckerboardIcon({
 export function OcSlidersVerticalIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={size}
@@ -113,10 +106,7 @@ export function OcSlidersVerticalIcon({
 export function OcSocialIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={Math.round(size * (38 / 24))}
@@ -162,10 +152,7 @@ export function OcSocialIcon({
 export function OcTextWidthIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={Math.round((size * 17) / 24)}
@@ -190,10 +177,7 @@ export function OcTextWidthIcon({
 export function OcTextHeightIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={Math.round((size * 20) / 23)}
@@ -218,10 +202,7 @@ export function OcTextHeightIcon({
 export function OcFontIcon({
 	className = "",
 	size = 32,
-}: {
+	}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={size}
@@ -244,11 +225,7 @@ export function OcShapesIcon({
 	className = "",
 	size = 32,
 	strokeWidth = 1.5,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-	strokeWidth?: number;
-}) {
 	return (
 		<svg
 			width={size}
@@ -288,10 +265,7 @@ export function OcShapesIcon({
 export function OcMirrorIcon({
 	className = "",
 	size = 32,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-}) {
 	return (
 		<svg
 			width={size}
@@ -329,11 +303,7 @@ export function OcSquarePlusIcon({
 	className = "",
 	size = 32,
 	strokeWidth = 1.5,
-}: {
+}: IconProps) {
-	className?: string;
-	size?: number;
-	strokeWidth?: number;
-}) {
 	return (
 		<svg
 			width={size}
@@ -383,3 +353,4 @@ export function OcSquarePlusIcon({
 		</svg>
 	);
 }
+