Icon
A wrapper for icons, including marks built with createIcon.
Preview
Loading...
import { CheckIcon } from "@radix-ui/react-icons";
import { Icon } from "@/components/ui/Icon";
import { createIcon } from "@/utils/create-icon";
export function IconDemo() {
return (
<div className="flex items-center gap-1">
<Icon label="Saved">
<CheckIcon className="icon" />
</Icon>
<Icon size="lg">
<Mark />
</Icon>
</div>
);
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/iconManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Icon component into your components/ui/Icon.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function Icon({
className,
label,
size = "default",
children,
...props
}: React.ComponentProps<"span"> & { label?: string; size?: "default" | "lg" }) {
return (
<span
data-slot="icon"
data-size={size}
role={label ? "img" : undefined}
aria-label={label}
aria-hidden={label ? undefined : true}
className={cn(
"icon inline-flex items-center justify-center",
size === "lg" && "h4",
className,
)}
{...props}
>
{children}
</span>
);
}
export { Icon };