@latte-macchiat-io/latte-vanilla-components 0.0.223 → 0.0.224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.223",
+  "version": "0.0.224",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Video/index.tsx

@@ -14,6 +14,7 @@ import {
   videoRecipe,
   type VideoVariants,
 } from './styles.css';
+import { Icon } from '../Icon';
 
 export type VideoProps = React.HTMLAttributes<HTMLDivElement> &
   VideoVariants & {
@@ -92,15 +93,27 @@ export const Video = ({
       )}
 
       {!hidePlayButton && !isAutoPlay && (
-        <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button" />
+        <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button">
+          <Icon icon="play" />
+        </button>
       )}
 
-      {isPlayingFullScreen && <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button" />}
+      {isPlayingFullScreen && (
+        <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button">
+          <Icon icon="close" />
+        </button>
+      )}
 
-      {isPlaying && showControls && <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button" />}
+      {isPlaying && showControls && (
+        <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button">
+          <Icon icon="pause" />
+        </button>
+      )}
 
       {showControls && (
-        <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button" />
+        <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button">
+          {isMuted ? <Icon icon="volumeUp" /> : <Icon icon="volumeMute" />}
+        </button>
       )}
     </div>
   );