Icon

The Synergy icon mark rendered as an inline SVG. Inherits currentColor for easy theming.

Installation

pnpmnpmyarnbun

pnpm dlx shadcn@latest add https://ui.synergyshock.com/r/synergy/icon.json

Usage

import { Icon } from "@/components/ui/synergy/icon"

export default function App() {
  return <Icon className="h-8 w-8" />
}

Examples

Sizing

Control the size with standard Tailwind utilities.

<Icon className="h-6 w-6" />
<Icon className="h-10 w-10" />
<Icon className="h-16 w-16" />

Custom Color

The SVG uses currentColor, so set the color with Tailwind or inline styles.

<Icon className="h-10 w-10 text-blue-500" />

API Reference

Props

Prop	Type	Default	Description
className	string	—	CSS class applied to the <svg> element.
...props	React.ComponentProps<"svg">	—	Any standard SVG attributes.