@silverassist/icons

SilverAssist Icons Library

React icon components for SilverAssist applications

Installation

npm install @silverassist/icons

Usage

import { QualitySVG, HealthcareSVG, CommunicationSVG } from '@silverassist/icons';

export default function MyComponent() {
  return (
    <div>
      {/* Use with default props */}
      <QualitySVG />
      
      {/* Customize size and colors */}
      <HealthcareSVG 
        width={50} 
        height={50} 
        fill="#E3F7FB" 
        stroke="#0066cc" 
      />
      
      {/* Works with Tailwind and other props */}
      <CommunicationSVG 
        className="hover:scale-110 transition-transform"
        onClick={() => console.log('Clicked!')}
      />
    </div>
  );
}

Component API

All icons accept standard SVG props via React.ComponentProps<"svg">:

Prop	Type	Default	Description
width	number	100 or 50	Icon width
height	number	100 or 50	Icon height
fill	string	"#E3F7FB"	Fill color
stroke	string	"#3F3F3F"	Stroke color
className	string	-	CSS classes
onClick	function	-	Click handler

Plus any other standard SVG attributes.

Available Icons

168 icons available including:

QualitySVG, ChoiceSVG, HealthcareSVG, CommunicationSVG, GovernmentSVG, LegalSVG, FinanceSVG, SafetySVG, TransportationSVG, EducationSVG, and many more.

For the complete list of icons, see the TypeScript autocomplete in your editor.

TypeScript Support

Full TypeScript support with type definitions included.

import type { ComponentProps } from 'react';
import { QualitySVG } from '@silverassist/icons';

// All SVG props are typed
const props: ComponentProps<typeof QualitySVG> = {
  width: 100,
  height: 100,
  fill: '#E3F7FB',
  stroke: '#3F3F3F'
};

Contributing

See CONTRIBUTING.md for development instructions.

License

Polyform Noncommercial License 1.0.0 - Silver Assist Team