Small update with icons

Use tailwind to define stroke styles.

packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx

@@ -212,9 +212,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                             <svg
                               aria-label="Pause"
                               viewBox="0 0 24 24"
-                              className="w-6 h-6 fill-none stroke-current stroke-2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
+                              className="w-6 h-6 fill-none stroke-current stroke-2 linecap-round linejoin-round"
                             >
                               <rect
                                 x="6"
@@ -234,9 +232,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                             <svg
                               aria-label="Play"
                               viewBox="0 0 24 24"
-                              className="w-6 h-6 fill-none stroke-current stroke-2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
+                              className="w-6 h-6 fill-none stroke-current stroke-2 linecap-round linejoin-round"
                             >
                               <polygon points="5 3 19 12 5 21 5 3" />
                             </svg>

packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx

@@ -128,9 +128,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
                             <svg
                               aria-label="Pause"
                               viewBox="0 0 24 24"
-                              className="w-6 h-6 fill-none stroke-current stroke-2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
+                              className="w-6 h-6 fill-none stroke-current stroke-2 linecap-round linejoin-round"
                             >
                               <rect
                                 x="6"
@@ -150,9 +148,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
                             <svg
                               aria-label="Play"
                               viewBox="0 0 24 24"
-                              className="w-6 h-6 fill-none stroke-current stroke-2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
+                              className="w-6 h-6 fill-none stroke-current stroke-2 linecap-round linejoin-round"
                             >
                               <polygon points="5 3 19 12 5 21 5 3" />
                             </svg>

packages/web-kitchensink-reactnext/src/styles/globals.css

@@ -17,6 +17,14 @@
   .font-semi-expanded {
     font-stretch: semi-expanded;
   }
+
+  .linejoin-round {
+    stroke-linejoin: round;
+  }
+
+  .linecap-round {
+    stroke-linecap: round;
+  }
 }
 
 .slider {