React Components & Usage
Import individual named icon components directly into your React pages and components.
Named Component Imports
// Import named icons
import { Home, EyeDashed, Accessibility, Settings } from '@mdsharik/quicksvg';
export default function Header() {
return (
<div className="flex gap-4">
<Home size={24} color="#3b82f6" />
<EyeDashed size={24} color="#10b981" />
<Accessibility size={24} color="#6366f1" />
</div>
);
}
Component Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | string | 24 | Width & height dimension of the SVG icon in pixels. |
| color | string | 'currentColor' | Stroke color hex string, RGB, or CSS color keyword. |
| strokeWidth | number | string | 2 | Thickness of the vector lines. Range: 1 to 4. |
| roundness | 'round' | 'butt' | 'square' | 'round' | Linecap and linejoin corner roundness style. |
| className | string | '' | TailwindCSS or custom CSS classes passed to the root SVG. |