diff --git a/scripts/generate-icon-types.js b/scripts/generate-icon-types.js index 3e11685f82..16d305922c 100644 --- a/scripts/generate-icon-types.js +++ b/scripts/generate-icon-types.js @@ -9,17 +9,21 @@ function generateIconTypes() { const files = fs.readdirSync(ICONS_DIR); const svgFiles = files.filter((file) => file.endsWith(".svg")); - const iconNames = svgFiles.map((file) => { + const iconNamesArray = svgFiles.map((file) => { const name = path.basename(file, ".svg"); - return ` | '${name}'`; + return ` '${name}'`; }); - const typesContent = `export type IconName = -${iconNames.join("\n")}; + const typesContent = ` +export const ALL_ICON_NAMES = [ +${iconNamesArray.join(",\n")} +] as const; + +export type IconName = typeof ALL_ICON_NAMES[number]; `; fs.writeFileSync(TYPES_FILE, typesContent); - console.log(`Generated icon types for ${svgFiles.length} icons:`); + console.log(`Generated icon types for ${svgFiles.length} icons`); } catch (error) { console.error("Error generating icon types:", error); process.exit(1); diff --git a/src/components/IconGallery/IconGallery.tsx b/src/components/IconGallery/IconGallery.tsx new file mode 100644 index 0000000000..c6d8139011 --- /dev/null +++ b/src/components/IconGallery/IconGallery.tsx @@ -0,0 +1,19 @@ +import React, { useMemo } from "react"; +import IconGalleryCard from "./IconGalleryCard"; +import { ALL_ICON_NAMES } from "../../typescript/iconName"; + +export default function IconGallery() { + const iconNames = useMemo(() => { + return [...ALL_ICON_NAMES].sort(); + }, []); + + return ( +
+
+ {iconNames.map((iconName) => ( + + ))} +
+
+ ); +} diff --git a/src/components/IconGallery/IconGalleryCard.tsx b/src/components/IconGallery/IconGalleryCard.tsx new file mode 100644 index 0000000000..2001452819 --- /dev/null +++ b/src/components/IconGallery/IconGalleryCard.tsx @@ -0,0 +1,42 @@ +import React, { useState } from "react"; +import { Icon } from "../Common/Icon"; +import { IconName } from "@site/src/typescript/iconName"; + +export interface IconGalleryCardProps { + iconName: IconName; +} + +export default function IconGalleryCard({ iconName }: IconGalleryCardProps) { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(iconName); + setCopied(true); + window.setTimeout(() => setCopied(false), 2000); + } catch (err) { + // eslint-disable-next-line no-console + console.error("Failed to copy icon name to clipboard:", err); + } + }; + + return ( +
+
+ +
+
+
+ {iconName} +
+
+ {copied ? "Copied!" : "Click to copy"} +
+
+
+ ); +} diff --git a/static/icons/backup-history.svg b/static/icons/backup-history.svg index 9f5e047425..c553d4cc77 100644 --- a/static/icons/backup-history.svg +++ b/static/icons/backup-history.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/templates/icon-gallery.mdx b/templates/icon-gallery.mdx new file mode 100644 index 0000000000..8714184753 --- /dev/null +++ b/templates/icon-gallery.mdx @@ -0,0 +1,74 @@ +--- +title: "Icon Gallery" +hide_table_of_contents: false +sidebar_label: Icon Gallery +--- + +import IconGallery from "@site/src/components/IconGallery/IconGallery"; +import Admonition from '@theme/Admonition'; + +# Icon Gallery + +This page showcases all available icons in the project along with their names. Click on any icon to copy its name to the clipboard. + +## Usage + +To use an icon in a component, import the `Icon` component and pass the icon name as the `icon` prop: + +```tsx +import { Icon } from "@site/src/components/Common/Icon"; + + +``` + +## Available Icons + + + + +Icons are automatically loaded from the `static/icons` directory. When you add a new SVG file to this directory, the icon will automatically appear in this gallery after restarting the development server. + + +## Icon Sizes + +The `Icon` component supports the following sizes: + +- `xs` - 16x16px (w-4 h-4) +- `sm` - 24x24px (w-6 h-6) - default +- `md` - 32x32px (w-8 h-8) +- `lg` - 40x40px (w-10 h-10) +- `xl` - 48x48px (w-12 h-12) + +## Usage Examples + +### Basic Usage + +```tsx +import { Icon } from "@site/src/components/Common/Icon"; + + +``` + +### With Custom Size + +```tsx + +``` + +### With Additional CSS Classes + +```tsx + +``` + +### In CardWithImage Component + +```tsx +import CardWithImage from "@site/src/components/Common/CardWithImage"; + + +``` \ No newline at end of file