Feat(web-twig): Add option to Icon component to disable SVG reusability

  * SVG icons are already reused by default using `use`
  * through this prop can be reusage simply disabled
  * because <use> element duplicate the nodes with the styles, so it is
    not possible to cutomize another usage of the same SVG icon (except
coordinates and sizes)
  * @see: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

packages/web-twig/src/Resources/components/Icon/Icon.twig

@@ -2,6 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _ariaHidden = props.ariaHidden ?? true -%}
 {%- set _class = props.class | default(null) -%}
+{%- set _isReusable = props.isReusable ?? true -%}
 {%- set _name = props.name -%}
 {%- set _size = props.size | default('24') -%}
 {%- set _title = props.title | default(null) -%}
@@ -11,4 +12,4 @@
  'aria-hidden': _ariaHidden ? 'true' : 'false',
 }) -%}
 
-{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _class, size: _size, title: _title, mainProps: _mainProps }) }}
+{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _class, size: _size, title: _title, mainProps: _mainProps }, _isReusable) }}

packages/web-twig/src/Resources/components/Icon/README.md

@@ -29,6 +29,7 @@ Without lexer:
 | ------------ | -------- | ------- | -------- | ------------------------------------- |
 | `ariaHidden` | `bool` | `true` | no | If true, icon is hidden from a11y API |
 | `class` | `string` | `null` | no | Custom CSS class |
+| `isReusable` | `bool` | `true` | no | Enables reusability of SVG icons |
 | `name` | `string` | — | yes | Name of the icon, case sensitive |
 | `size` | `number` | `24` | no | Size of the icon |
 | `title` | `string` | `null` | no | Optional title to display on hover |