@delvicons/icons
Version:
DelvIcons - Comprehensive icon library with static and animated SVG icons for all frameworks
299 lines (229 loc) ā¢ 7.93 kB
Markdown
# DelvIcons šØ
> Comprehensive icon library with static and animated SVG icons for all frameworks
[](https://www.npmjs.com/package/@delvicons/icons)
[](https://opensource.org/licenses/MIT)
DelvIcons is a modern, comprehensive icon library that provides both static and animated SVG icons compatible with React, Vue, Angular, React Native, and vanilla JavaScript. Built with TypeScript and designed for performance and accessibility.
## āØ Features
- šÆ **Universal Compatibility** - Works with React, Vue, Angular, React Native, and vanilla JS
- š¬ **Animated Icons** - Unique collection of animated SVG icons with smooth transitions
- šØ **Customizable** - Easy to style with CSS, supports theming and custom animations
- š± **Responsive** - Icons that work perfectly across all devices and screen sizes
- āæ **Accessible** - Built with accessibility best practices and ARIA support
- š **Performance Optimized** - Tree-shakeable, optimized SVGs, minimal bundle size
- šŖ **Rich Animations** - Pre-built animation utilities (spin, pulse, bounce, etc.)
- š **Dark Mode Ready** - Automatic theme adaptation
## š¦ Installation
```bash
npm install @delvicons/icons
# or
yarn add @delvicons/icons
# or
pnpm add @delvicons/icons
```
## š Quick Start
### React
```tsx
import { ArrowRight, LoadingSpinner } from '@delvicons/icons/react';
function App() {
return (
<div>
<ArrowRight size={24} />
<LoadingSpinner animated className="text-blue-500" />
</div>
);
}
```
### Vue 3
```vue
<template>
<div>
<ArrowRight :size="24" />
<LoadingSpinner :animated="true" class="text-blue-500" />
</div>
</template>
<script setup>
import { ArrowRight, LoadingSpinner } from '@delvicons/icons/vue';
</script>
```
### Angular
```typescript
import { ArrowRightComponent, LoadingSpinnerComponent } from '@delvicons/icons/angular';
@Component({
selector: 'app-root',
template: `
<delv-arrow-right [size]="24"></delv-arrow-right>
<delv-loading-spinner [animated]="true"></delv-loading-spinner>
`,
imports: [ArrowRightComponent, LoadingSpinnerComponent]
})
export class AppComponent {}
```
### Vanilla JavaScript
```javascript
import { createArrowRight, createLoadingSpinner } from '@delvicons/icons/vanilla';
const arrowIcon = createArrowRight({ size: 24 });
const spinnerIcon = createLoadingSpinner({ animated: true, className: 'text-blue-500' });
document.body.appendChild(arrowIcon);
document.body.appendChild(spinnerIcon);
```
### CSS Animations
```html
<html>
<head>
<link rel="stylesheet" href="node_modules/@delvicons/icons/dist/delvicons.css">
</head>
<body>
<!-- Direct SVG usage with CSS classes -->
<svg class="delv-icon delv-spin">
<!-- SVG content -->
</svg>
</body>
</html>
```
## š¬ Animation Classes
DelvIcons comes with built-in CSS animation utilities:
```html
<!-- Basic animations -->
<icon class="delv-spin" /> <!-- Spinning animation -->
<icon class="delv-pulse" /> <!-- Pulsing animation -->
<icon class="delv-bounce" /> <!-- Bouncing animation -->
<icon class="delv-fade" /> <!-- Fading animation -->
<!-- Hover effects -->
<icon class="delv-hover-spin" /> <!-- Spin on hover -->
<icon class="delv-hover-bounce" /><!-- Bounce on hover -->
<!-- Size utilities -->
<icon class="delv-icon-xs" /> <!-- 12px -->
<icon class="delv-icon-sm" /> <!-- 16px -->
<icon class="delv-icon-lg" /> <!-- 24px -->
<icon class="delv-icon-xl" /> <!-- 32px -->
<!-- Color utilities -->
<icon class="delv-icon-primary" />
<icon class="delv-icon-success" />
<icon class="delv-icon-warning" />
```
## š API Reference
### Icon Props
All framework components accept these common props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number \| string` | `24` | Icon size in pixels or CSS unit |
| `color` | `string` | `'currentColor'` | Icon color |
| `className` | `string` | `''` | Additional CSS classes |
| `animated` | `boolean` | `false` | Enable animation (for animated icons) |
| `style` | `object` | `{}` | Inline styles |
### Animation Props (Animated Icons)
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `duration` | `string` | `'2s'` | Animation duration |
| `timing` | `string` | `'ease-in-out'` | Animation timing function |
| `iteration` | `string` | `'infinite'` | Animation iteration count |
| `playState` | `'running' \| 'paused'` | `'running'` | Animation play state |
## šØ Customization
### Custom Colors
```tsx
// Using props
<ArrowRight color="#3b82f6" />
<ArrowRight color="var(--primary-color)" />
// Using CSS
<ArrowRight className="text-blue-500" />
<ArrowRight style={{ color: '#3b82f6' }} />
```
### Custom Animations
```css
.my-custom-animation {
animation: my-spin 1s linear infinite;
}
@keyframes my-spin {
from { transform: rotate(0deg) scale(1); }
to { transform: rotate(360deg) scale(1.1); }
}
```
### Dark Mode
```css
@media (prefers-color-scheme: dark) {
.delv-icon {
color: #f1f5f9;
}
}
/* Or using CSS variables */
:root {
--icon-color: #1e293b;
}
[data-theme="dark"] {
--icon-color: #f1f5f9;
}
.delv-icon {
color: var(--icon-color);
}
```
## š Icon Categories
- **Arrows** - Navigation and directional icons
- **Feedback** - Loading states, notifications, status indicators
- **Emotions** - Hearts, reactions, emotional expressions
- More categories coming soon!
## š ļø Development
### Building the Library
```bash
npm install
npm run build
```
### Preview Icons
```bash
npm run preview
```
This starts a local server at `http://localhost:3000` with an interactive icon browser.
### Adding New Icons
```bash
npm run generate:icon
```
Follow the interactive prompts to create a new icon.
### Scripts
- `npm run dev` - Start development mode with file watching
- `npm run build` - Build all components and assets
- `npm run preview` - Start icon preview server
- `npm run generate:icon` - Interactive icon generator
- `npm test` - Run tests
- `npm run lint` - Lint code
## š Project Structure
```
delvicons/
āāā src/
ā āāā svg/
ā ā āāā static/ # Static SVG icons
ā ā āāā animated/ # Animated SVG icons
ā āāā icons.json # Icon metadata
ā āāā index.ts # Main entry point
ā āāā types.ts # TypeScript definitions
āāā scripts/
ā āāā build-svg.js # SVG optimization
ā āāā build-components.js # Component generation
ā āāā build-css.js # CSS utilities
ā āāā preview.js # Development server
ā āāā generate-icon.js # Icon generator
āāā dist/ # Built assets
āāā react/
āāā vue/
āāā angular/
āāā vanilla/
āāā svg/
āāā delvicons.css
```
## š¤ Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-icons`)
3. Add your icons to the appropriate SVG directories
4. Update `src/icons.json` with icon metadata
5. Run `npm run build` to generate components
6. Test your changes with `npm run preview`
7. Commit your changes (`git commit -am 'Add amazing icons'`)
8. Push to the branch (`git push origin feature/amazing-icons`)
9. Open a Pull Request
## š License
MIT Ā© [Aman Soni](mailto:aman.soni.se@gmail.com)
## š Acknowledgments
- Inspired by [Heroicons](https://heroicons.com/), [Feather](https://feathericons.com/), and [Lucide](https://lucide.dev/)
- Built with [SVGO](https://github.com/svg/svgo) for optimization
- Animation utilities inspired by [Animate.css](https://animate.style/)
---
Made with ā¤ļø by the DelvUI team