React Components

svgpack includes ready-to-use React components for teams that want to consume generated SVG assets in React without rewriting the same mask or background styles in each component. Use them when your SVG data has already been generated by the CLI and you want a small typed wrapper around the CSS API.

Usage

import { SvgpackMask, SvgpackBackground } from '@artero/svgpack';

// SvgpackMask component (great for colored icons)
<SvgpackMask
  image="my-icon"
  width="24px"
  height="24px"
  className="text-blue-500"
/>

// SvgpackBackground component
<SvgpackBackground
  image="my-logo"
  width="100%"
  height="200px"
  className="bg-gray-100"
/>

Component Props

SvgpackMask & SvgpackBackground

Both components accept the following props:

• image?: string - The name of the SVG variable (without the -- prefix)
• width?: string - CSS width value (e.g., “24px”, “100%”, “2rem”)
• height?: string - CSS height value (e.g., “24px”, “200px”, “3rem”)
• className?: string - Additional CSS classes
• style?: React.CSSProperties - Inline styles
• children?: React.ReactNode - Child elements
• All standard HTML div attributes

TypeScript Support

The components are fully typed and include TypeScript definitions:

import { SvgpackMask, SvgpackBackground } from '@artero/svgpack';

interface MyComponentProps {
  iconName: string;
  size?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ iconName, size = "24px" }) => (
  <SvgpackMask
    image={iconName}
    width={size}
    height={size}
    className="text-primary"
  />
);

When to use React components vs CSS classes

• Use SvgpackMask for icons that should inherit color from currentColor.
• Use SvgpackBackground for logos or multicolor SVG assets.
• Use plain classes from CSS Variables if you do not need a React wrapper.
• Use Tailwind v4 if your project already maps everything through Tailwind utilities.