Add Support for Adjustable Stroke Width in SVG Icons

[koddist]

Currently, the @ngneat/svg-icon library does not provide a built-in property to adjust the stroke width of SVG icons. This feature would be incredibly useful, as it would allow developers to use the same icon across different components with varying stroke widths, enhancing flexibility and reusability.

Current Workaround and Limitations:
I attempted to remove the stroke-width="2" attribute from the SVG file and set the stroke width via CSS ({ stroke-width: 3 }). However, this approach does not work as expected. The library seems to default the stroke width to 1, overriding any custom CSS styles. This limitation makes it difficult to dynamically adjust stroke widths based on different use cases.

Proposed Solution:

It would be highly beneficial to introduce a property (e.g., strokeWidth) that allows developers to dynamically set the stroke width of SVG icons. This property could be passed as an input to the svg-icon component, enabling customization at the component level.

Example Usage:

<svg-icon key="my-icon" [strokeWidth]="3"></svg-icon>

Benefits:

• Improved flexibility: Use the same icon with different stroke widths across components.
• Simplified workflow: Avoid manual edits to SVG files or reliance on CSS overrides.
• Enhanced consistency: Maintain a consistent design system while allowing for contextual adjustments.

Conclusion:

Adding support for adjustable stroke widths would greatly enhance the versatility of the @ngneat/svg-icon library, making it even more powerful for modern web development. I believe this feature would be a valuable addition for many developers using the library.

Thank you for considering this request! I look forward to hearing your thoughts.

[NetanelBasal]

You're welcome to create a PR, we can also use CSS variable to modify it