pqoqubbw-icons

For local development, no manual font configuration is required. The project automatically uses Google Fonts (Geist) instead of the proprietary fonts. You can start development immediately by running:

pnpm install && pnpm dev

Because proprietary font files (.woff) are excluded from the repository for licensing reasons, you must provide download URLs via environment variables in your Vercel deployment. The prebuild script will automatically download these fonts during the build process.

Required environment variables:

• FONT_DOWNLOAD_URL_GT_CINETYPE: The URL to the GT-Cinetype-Regular.woff file in your Vercel Blob Storage.
• FONT_DOWNLOAD_URL_ANDALE_MONO: The URL to the ANDALEMO.woff file in your Vercel Blob Storage.

FONT_DOWNLOAD_URL_GT_CINETYPE=https://your-blob-url.vercel-storage.com/GT-Cinetype-Regular-xxx.woff
FONT_DOWNLOAD_URL_ANDALE_MONO=https://your-blob-url.vercel-storage.com/ANDALEMO-xxx.woff

The project uses proprietary fonts (GT-Cinetype-Regular.woff and ANDALEMO.woff) that are subject to strict licensing.

Compliance Rules:

• Allowed: Using the fonts on websites via @font-face.
• Prohibited: Distributing font files in public repositories.
• Prohibited: Sharing font files publicly.

To maintain compliance, font files are included in .gitignore and are only fetched from secure storage during production builds.

The library provides a collection of animated icons. Each icon is identified by a unique name and can be discovered using a list of associated keywords. This metadata is useful for building search or selection interfaces.

Common icon categories include:

• Navigation/Arrows: arrow-up, arrow-down, corner-up-right, chevron-first.
• Communication: phone, mail, message-circle, send, mic.
• Files/Folders: folder-open, folder-lock, folder-git, folder-archive.
• Social/Web: facebook, twitter, linkedin, instagram, discord.
• Weather: cloud-rain, sun-moon, snowflake, thermometer.
• Tools/Work: hammer, wrench, pickaxe, briefcase-business.
• Finance: wallet, credit-card, receipt, receipt-euro.
• Security: lock, key, eye-off, badge-alert.

Each object within the ICON_LIST array follows this structure:

• name: (string) The unique identifier for the icon.
• icon: (Component) The animated icon component.
• keywords: (string[]) An array of strings used for searching the icon.

The ServerIcon component accepts the following props:

• size (number): The width and height of the SVG icon in pixels. Defaults to 28.
• className (string): Additional CSS classes for the container div.
• onMouseEnter (function): Callback triggered when the mouse enters the icon. Note: If a ref is provided, this callback is required to handle animation logic manually.
• onMouseLeave (function): Callback triggered when the mouse leaves the icon. Note: If a ref is provided, this callback is required to handle animation logic manually.
• ...props: Any standard HTMLAttributes<HTMLDivElement>.

When you pass a ref to the ServerIcon component, you gain access to the ServerIconHandle interface, allowing you to programmatically control the animation state. Providing a ref switches the component from automatic hover-based animation to manual control.

export interface ServerIconHandle {
  startAnimation: () => void;
  stopAnimation: () => void;
}

The ServerIcon component renders an animated SVG icon representing a server. It features a built-in animation where the top and bottom rectangles move apart on hover.

By default, the icon is uncontrolled and triggers animations automatically on onMouseEnter and onMouseLeave. If you provide a ref using ServerIconHandle, the component becomes controlled, and you must manually trigger animations via the ref methods.