Icon

Renders a trusted local svg icon inline by fetching and sanitizing the file at runtime through DOMPurify, with configurable sizing, accessibility support, and fallback handling.

npx shadcn@latest add @rokkit200-ui/icon

Preview

Code

import { Icon } from "@/registry/rokkit200-ui/components/icon/icon";

export default function IconDefaultDemo() {
    return (
        <div>
            <Icon iconPath="svg/social/facebook_icon" height={50} width={50} />
        </div>
    );
}

Usage

import { Icon } from "@/rokkit200-ui/components/icon/icon";

<Icon name="facebook_icon" />

Examples

Fallback

Illustrates the optional fallback prop, allowing fully customizable fallback UI when an icon fails to load which accepts text, elements, or custom components via React.ReactNode. In this example iconPath has a typo to showcase behavior.

Preview

No SVG found

Code

import { Icon } from "@/registry/rokkit200-ui/components/icon/icon";

export default function IconFallbackDemo() {
    return (
        <div>
            <Icon iconPath="svg/socail/facebook_icon" fallback="No SVG found" />
        </div>
    );
}

Custom styling

Demonstrates how to apply custom Tailwind classes to an Icon with hardcoded SVG colors. While the SVG currently uses fixed fill values, you can override these styles using Tailwind’s [&_path]:fill-* or [&_path]:stroke-* utilities. For best flexibility, SVGs should use currentColor for fill or stroke, which allows standard text-* classes to control the icon color.

To have a better understanding on SVGs fill, stroke and path usage and more, check out SVG from scratch.

Preview

Code

import { Icon } from "@/registry/rokkit200-ui/components/icon/icon";

export default function IconCustomStylingDemo() {
    return (
        <div>
            <Icon
                iconPath="svg/social/x_icon"
                height={50}
                width={50}
                className="[&_path]:fill-orange-700 [&_path]:hover:fill-orange-500"
            />
        </div>
    );
}

API Reference

Prop	Type	Default	Description
iconPath	string	—	Local file path used to fetch the SVG. The component appends .svg automatically and loads it at runtime. Required.
width	number | string	20	Injected into the rendered <svg> as the width attribute. Overrides any width defined inside the original SVG file. Optional.
height	number | string	20	Injected into the rendered <svg> as the height attribute. Overrides any height defined inside the original SVG file. Optional.
className	string	—	Applied to the wrapping <span> element. Useful for styling with Tailwind classes. Optional.
fallback	React.ReactNode	—	Rendered if the SVG fails to load or cannot be fetched. Accepts custom text or any React component, allowing flexible fallback content such as a placeholder icon. Optional.

Accessibility

For full accessibility and to meet WCAG guidelines, exported SVGs should include <title> and optional <desc> elements, along with aria-labelledbyand role, providing screen readers with meaningful, human readable descriptions of the icon’s purpose. Including these elements ensures icons convey semantic information, improving usability for users of assistive technologies and helping meet WCAG 2.1 success criteria.