# Dev Icons

A comprehensive library of high-quality SVG icons for various development technologies and frameworks. All icons are optimized for quality, scalability, and modern design aesthetics.

## Installation

```bash
npm install @devchristian1337/dev-icons
```

## Features

- High-quality SVG icons
- TypeScript support
- Modern, consistent design
- Easy-to-use API
- Built-in validation
- Zero dependencies
- React component support

## Available Icons

Currently supported icons:

### Frontend Technologies

- HTML
- CSS
- JavaScript
- React
- Vue.js
- Angular (Classic & Modern versions)
- Bootstrap (Classic & Modern versions)
- TailwindCSS

### Backend & Programming Languages

- Node.js
- Python
- C#
- PHP
- Ruby
- Swift
- Kotlin
- Dart
- Java

### Frameworks & Libraries

- Django
- Flutter
- Electron

### Cloud & DevOps

- AWS
- Azure
- Docker

### Databases

- MongoDB
- MySQL
- PostgreSQL

### Design Tools

- Figma

### Development Tools & Services

- Git
- GitHub
- Copilot

## Usage

### React Component

The easiest way to use the icons is with the included React component:

```jsx
import { DevIcon } from "@devchristian1337/dev-icons";

function App() {
  return (
    <div>
      {/* Basic usage */}
      <DevIcon name="react" />

      {/* Custom size */}
      <DevIcon name="javascript" size={32} />

      {/* With additional props */}
      <DevIcon
        name="nodejs"
        size={48}
        className="my-icon"
        onClick={() => console.log("Icon clicked!")}
      />
    </div>
  );
}
```

The `DevIcon` component accepts the following props:

- `name` (required): The name of the icon to display
- `size` (optional): Size in pixels (both width and height), defaults to 24
- `className` (optional): Additional CSS classes
- All standard SVG attributes are also supported

### JavaScript/TypeScript API

You can also use the library programmatically:

```typescript
import devIcons from "@devchristian1337/dev-icons";

// Get all icons
const allIcons = devIcons.getAllIcons();

// Get a specific icon
const reactIcon = devIcons.getIcon("react");
if (reactIcon) {
  console.log(reactIcon.name); // "React"
  console.log(reactIcon.icon); // SVG content for React icon
}

// Check if an icon exists
const hasTailwind = devIcons.hasIcon("tailwindcss"); // true

// Get all available icon keys
const iconKeys = devIcons.getIconKeys(); // ['html', 'css', 'javascript', ...]

// Add a custom icon (must be SVG)
try {
  devIcons.addIcon("customIcon", {
    name: "Custom Icon",
    icon: "<svg>...</svg>", // Your SVG content
  });
} catch (error) {
  if (error instanceof IconValidationError) {
    console.error("Invalid SVG provided");
  }
}
```

## Icon Object Structure

Each icon object contains:

- `name`: The display name of the technology (e.g., "React", "Node.js")
- `icon`: The complete SVG markup for the icon

## Validation

The library includes built-in validation to ensure all icons are valid SVG resources. Validation occurs:

- During library initialization
- When adding new icons via `addIcon()`

If an invalid SVG is provided, an `IconValidationError` will be thrown.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT