From 93b677336178d07486905f2e23ec0cb31d55bf5a Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Wed, 13 Mar 2024 19:00:21 +0530
Subject: [PATCH] add Icon component and remove btn

---
 src/components/Assets.jsx | 25 +++++--------------------
 src/components/Icons.jsx  | 22 ++++++++++++++++++++--
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/Assets.jsx b/src/components/Assets.jsx
index a0a76a9..47157c1 100644
--- a/src/components/Assets.jsx
+++ b/src/components/Assets.jsx
@@ -7,6 +7,7 @@ import { Trans } from '@lingui/macro';
 import { ProBadge } from './ProBadge';
 import { LoaderWithText } from './Loader';
 import { Text } from './Text';
+import { Icon } from './Icons';
 
 const Assets = () => {
 	const [files, setFiles] = useState([]);
@@ -227,10 +228,7 @@ const Assets = () => {
 							onClick={() => setListType('list')}
 							aria-label="List view"
 						>
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-								<title>view-list</title>
-								<path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" />
-							</svg>
+							<Icon name="view-list" />
 						</button>
 						<button
 							class={`btn btn--dark ${
@@ -239,9 +237,7 @@ const Assets = () => {
 							onClick={() => setListType('grid')}
 							aria-label="Grid view"
 						>
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-								<path d="M3 11h8V3H3m0 18h8v-8H3m10 8h8v-8h-8m0-10v8h8V3" />
-							</svg>
+							<Icon name="view-grid" />
 						</button>
 					</Stack>
 				) : null}
@@ -269,12 +265,7 @@ const Assets = () => {
 											onClick={() => copyFileUrl(file.url)}
 											aria-label="Copy URL"
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 24 24"
-											>
-												<path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z" />
-											</svg>
+											<Icon name="copy" />
 										</button>
 										<button
 											class={`btn btn--dark ${
@@ -283,13 +274,7 @@ const Assets = () => {
 											onClick={() => removeFileHandler(index)}
 											aria-label="Delete"
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 24 24"
-												fill="currentColor"
-											>
-												<path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9M7 6h10v13H7V6m2 2v9h2V8H9m4 0v9h2V8h-2Z" />
-											</svg>
+											<Icon name="trash" />
 										</button>
 									</Stack>
 								</div>
diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx
index db9b23b..adf4ad6 100644
--- a/src/components/Icons.jsx
+++ b/src/components/Icons.jsx
@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 export function Icons() {
 	return (
 		<svg
@@ -109,6 +107,18 @@ export function Icons() {
 				<symbol id="search" viewBox="0 0 24 24">
 					<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
 				</symbol>
+				<symbol id="copy" viewBox="0 0 24 24">
+					<path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z" />
+				</symbol>
+				<symbol id="trash" viewBox="0 0 24 24">
+					<path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9M7 6h10v13H7V6m2 2v9h2V8H9m4 0v9h2V8h-2Z" />
+				</symbol>
+				<symbol id="view-grid" viewBox="0 0 24 24">
+					<path d="M3 11h8V3H3m0 18h8v-8H3m10 8h8v-8h-8m0-10v8h8V3" />
+				</symbol>
+				<symbol id="view-list" viewBox="0 0 24 24">
+					<path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" />
+				</symbol>
 				<symbol id="loader-icon" viewBox="0 0 44 44">
 					{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
 					<g fill="none" fillRule="evenodd" strokeWidth={10}>
@@ -162,3 +172,11 @@ export function Icons() {
 		</svg>
 	);
 }
+
+export const Icon = ({ name, ...rest }) => {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" {...rest}>
+			<use xlinkHref={`#${name}`} />
+		</svg>
+	);
+};