npm package: @nijaadh-dev/icon-library
Description: A lightweight, framework-agnostic icon library using Web Components
Author: Your Name
Latest version: 1.0.4

# Icon Library

A lightweight, framework-agnostic icon library using Web Components. Works with Angular, React, Vue, Svelte, or vanilla JavaScript.

## Installation

```bash
npm install @your-username/icon-library
```

## Usage

### Vanilla JavaScript / HTML

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import '@your-username/icon-library';
  </script>
</head>
<body>
  <app-icon name="user"></app-icon>
  <app-icon name="settings" size="32px"></app-icon>
</body>
</html>
```

### Angular

#### Step 1: Import in your main.ts

```typescript
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

// Import icon library
import '@your-username/icon-library';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));
```

#### Step 2: Add CUSTOM_ELEMENTS_SCHEMA

For standalone components:
```typescript
// your.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-your-component',
  standalone: true,
  templateUrl: './your.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourComponent {}
```

For NgModule:
```typescript
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // ... other config
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
```

#### Step 3: Use in templates

```html
<app-icon name="user"></app-icon>
<app-icon name="settings" size="24px"></app-icon>
```

### React

```jsx
import { useEffect } from 'react';
import '@your-username/icon-library';

function App() {
  return (
    <div>
      <app-icon name="user"></app-icon>
      <app-icon name="settings" size="24px"></app-icon>
    </div>
  );
}
```

For TypeScript, add to your declarations:
```typescript
// react-app-env.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'app-icon': any;
  }
}
```

### Vue

```vue
<template>
  <div>
    <app-icon name="user"></app-icon>
    <app-icon name="settings" size="24px"></app-icon>
  </div>
</template>

<script>
import '@your-username/icon-library';

export default {
  name: 'App'
}
</script>
```

### Svelte

```svelte
<script>
  import '@your-username/icon-library';
</script>

<app-icon name="user"></app-icon>
<app-icon name="settings" size="24px"></app-icon>
```

## Attributes

- `name` (required): The icon name (e.g., "user", "settings")
- `size`: Custom size (e.g., "24px", "2rem", "32px")

## Styling

You can style icons using CSS:

```css
app-icon {
  /* Set color */
  --icon-color: #3498db;
  color: #3498db; /* Also works */
  
  /* Set size */
  width: 24px;
  height: 24px;
  
  /* Or use size attribute */
}

/* Hover effect */
app-icon:hover {
  --icon-color: #2980b9;
}
```

## Available Icons

- user
- settings
- (add your icons here)

## Adding Your Own Icons

1. Place SVG files in the `icons/` directory
2. Run `npm run build`
3. Icons will be available using their filename (without .svg extension)

## Development

```bash
# Install dependencies
npm install

# Build the library
npm run build

# List all available icons
npm run list-icons
```

## Browser Support

Works in all modern browsers that support:
- Custom Elements (Web Components)
- ES Modules

For older browsers, consider using polyfills.

## License

MIT

## Contributing

Pull requests are welcome! Please ensure your icons are optimized and follow the naming conventions.