\n```\n\n**Features:**\n\n- 94×94px circular background\n- 58×58px centered icon\n- Dynamic colors via `--icon-bg-color` CSS variable\n- Works with all icon categories\n- Perfect for CTAs, feature highlights, and dashboard widgets\n\n## Icon Categories\n\n| Category | Description | Color Support |\n| ----------------- | -------------------------------------- | ------------------ |\n| **basic** | Common UI icons (home, settings, etc.) | ✅ Inherits color |\n| **flags** | Country flags | ❌ Original colors |\n| **brand** | Company logos | ✅ Inherits color |\n| **arrow** | Directional arrows | ✅ Inherits color |\n| **money** | Financial icons | ✅ Inherits color |\n| **users** | User-related icons | ✅ Inherits color |\n| _...and 20+ more_ | | |\n\n## Advanced Usage\n\n### Theme Integration\n\n```scss\n// Dark mode support\n.icon-theme {\n color: #333;\n\n @media (prefers-color-scheme: dark) {\n color: #fff;\n }\n}\n\n// CSS variables for theming\n.theme-system {\n --icon-primary: #007bff;\n --icon-secondary: #6c757d;\n\n .icon-basic-home {\n color: var(--icon-primary);\n\n &:hover {\n color: var(--icon-secondary);\n }\n }\n}\n```\n\n### Responsive Patterns\n\n```scss\n// Mobile-first responsive sizing\n.icon-responsive {\n width: 16px;\n height: 16px;\n\n @media (min-width: 768px) {\n width: 24px;\n height: 24px;\n }\n\n @media (min-width: 1024px) {\n width: 32px;\n height: 32px;\n }\n}\n```\n\n### Animation Integration\n\n```scss\n// Spinning icon\n.icon-spinner {\n animation: spin 1s linear infinite;\n}\n\n// Pulse effect\n.icon-notification {\n animation: pulse 2s ease infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.2);\n }\n}\n```\n\n## Development\n\n### Project Structure\n\n```\ndenarius-Icons-UI/\n├── assets/ # Icon source files\n│ ├── icons/svg/ # SVG icons by category\n│ └── animations/ # Animation files\n├── src/styles/mixins/ # SASS source files\n│ ├── _denarius-ui-icons.scss # Main icon library\n│ ├── _denarius-ui-icon-helpers.scss # Helper mixins\n│ └── _icon-map.scss # Auto-generated icon map\n├── scripts/ # Build automation\n│ ├── generate-icon-map.js # Icon discovery\n│ ├── generate-demo.js # Demo generation\n│ └── copy-files.js # Asset copying\n├── dist/ # Distribution files\n│ ├── css/ # Compiled CSS\n│ ├── scss/ # SASS files\n│ └── assets/ # Copied assets\n└── demo/ # Auto-generated demo\n```\n\n### Build Commands\n\n````bash\n# Full build (generate map + copy files + compile SASS)\nnpm run build\n\n# Generate demo site\nnpm run demo\n\n### Code Quality Tools\n\n```bash\n# Format all code files\nnpm run format\n\n# Check formatting without changes\nnpm run format:check\n\n# Lint and fix JavaScript\nnpm run lint\n````\n\n## Technical Details\n\n### Icon Implementation\n\nThe library uses two approaches for displaying icons:\n\n1. **Mask-based Icons** (most categories):\n\n ```css\n .icon-basic-home {\n mask-image: url('../assets/icons/svg/basic/basic-24-home.svg');\n -webkit-mask-image: url('../assets/icons/svg/basic/basic-24-home.svg');\n background-color: currentColor;\n }\n ```\n\n2. **Flag Icons** (flags category):\n ```css\n .icon-flags-us {\n background-image: url('../assets/icons/svg/flags/flags-24-us.svg');\n background-size: contain;\n }\n ```\n\n### CSS Optimization\n\n- **Shared Properties**: Common styles via SASS extends\n- **Efficient Selectors**: Optimized for minimal CSS output\n- **Vendor Prefixes**: Automatic webkit support for masks\n- **File Size**: Compressed output with minimal duplication\n\n### Browser Support\n\n| Feature | Chrome | Firefox | Safari | Edge |\n| ------------- | ------ | ------- | ------ | ---- |\n| CSS Masks | 51+ | 53+ | 9.1+ | 79+ |\n| CSS Variables | 49+ | 31+ | 9.1+ | 79+ |\n| CSS Grid | 57+ | 52+ | 10.1+ | 79+ |\n\n## Best Practices\n\n### Accessibility\n\n```html\n\n\n\n\n\n \n Important information\n
\n```\n\n### Performance\n\n- Use standard sizes (16px, 24px) for consistency\n- Implement lazy loading for large icon sets\n- Consider sprite sheets for multiple icons\n- Optimize SVG files before adding to library\n\n### Color Management\n\n- Use CSS variables for theme colors\n- Ensure sufficient color contrast (WCAG AA)\n- Consider reduced motion preferences\n- Use `currentColor` for inheriting text color\n\n## Troubleshooting\n\n### Common Issues\n\n**Icons not displaying:**\n\n- Verify SVG file paths are correct\n- Check browser support for CSS masks\n- Ensure no conflicting styles\n\n**Colors not applying:**\n\n- Confirm icon uses mask-based approach\n- Check for conflicting `background-color` rules\n- Verify CSS variable values\n\n**Big picture modifier issues:**\n\n- Ensure `--icon-bg-color` is set\n- Check z-index conflicts\n- Verify icon class is correct\n\n## Contributing\n\n### Adding New Icons\n\n1. Add SVG file to `assets/icons/svg/[category]/`\n2. Run `npm run build` to regenerate icon map\n3. Test in demo site\n\n### Creating New Modifiers\n\n```scss\n// Add to _denarius-ui-icons.scss\n.icon--new-modifier {\n // Implementation\n}\n```\n\n## Installation & Integration\n\n### NPM Installation\n\n```bash\n# Using npm\nnpm install @denariusfinancees/icons-ui\n\n# Using yarn\nyarn add @denariusfinancees/icons-ui\n```\n\n### CSS Integration\n\n```html\n\n\n```\n\n```javascript\n// JavaScript/ES6\nimport '@denariusfinancees/icons-ui/dist/css/denarius-ui-icons.css';\n```\n\n```scss\n// SASS\n@import 'node_modules/@denariusfinancees/icons-ui/dist/css/denarius-ui-icons.css';\n```\n\n### Angular Integration\n\n1. **Install the package:**\n\n```bash\nnpm install @denariusfinancees/icons-ui\n```\n\n2. **Add to angular.json:**\n\n```json\n{\n \"projects\": {\n \"your-app\": {\n \"architect\": {\n \"build\": {\n \"options\": {\n \"styles\": [\n \"node_modules/@denariusfinancees/icons-ui/dist/css/denarius-ui-icons.min.css\"\n ],\n \"assets\": [\n {\n \"glob\": \"**/*\",\n \"input\": \"node_modules/@denariusfinancees/icons-ui/dist/assets/\",\n \"output\": \"/assets/icons/\"\n }\n ]\n }\n }\n }\n }\n }\n}\n```\n\n3. **Use in components:**\n\n```html\n\n\n```\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Support\n\nFor issues, questions, or contributions:\n\n- Repository: [Denarius Icons UI](https://dev.azure.com/DenariusEs/Design-System/_git/denarius-Icons-UI)\n- Author: fernando.martinez@denarius.es\n\n```\n\n```\n","readmeFilename":"README.md"}