You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This PR was squashed before being merged into the 2.x branch.
Discussion
----------
[Icons] Configure icon sets: path, alias & icon attributes
| Q | A
| ------------- | ---
| Bug fix? | no
| New feature? | yes
| Issues | Fix #
| License | MIT
I'm opening now if you guys have feedback, and i will add more tests the next couple days
> [!NOTE]
> This PR brings 3 new features: iconset aliases, custom path and attributes. So let's focus on that 😄
```yaml
ux_icons:
icon_dir: '%kernel.project_dir%/assets/icons'
# Default icon set
default_icon_attributes:
class: 'icon'
fill: 'currentColor'
width: '24'
height: '24'
icon_sets:
# Local icon set (prefix mapped to a local directory)
flags:
path: '%kernel.project_dir%/assets/images/flags'
# Remote icon set (prefix mapped to an icon set identifier)
lu:
alias: 'lucide'
# Icon set configuration (work for local/remote)
oc:
icon_attributes:
class: 'oc-icon' # Replace the default class
stroke: 'none' # Add a new attribute
fill: false # Use "false" to remove a default attribute
```
### Default attributes
```twig
<twig:ux:icon name="anything" />
{# Renders #}
<svg class="icon" fill="currentColor" width="24" height="24"> ... </svg>
```
## Icon set configuration
### Local icons: path
```twig
<twig:ux:icon name="flags:fr" />
{# Renders: #}
<svg class="icon" fill="currentColor" width="24" height="24">
<!-- file assets/images/flags/fr.svg -->
</svg>
```
### Remote icons: alias
```twig
<twig:ux:icon name="lu:circle-check" />
{# Renders: #}
<svg class="icon" fill="currentColor" width="24" height="24">
<!-- file lucide:circle-check.svg from iconify -->
</svg>
```
### Icon set attributes
```twig
<twig:ux:icon name="oc:check" />
{# Renders: #}
{# Attributes are merged into the default attributes #}
<svg class="oc-icon" stroke="none" width="24" height="24">
<!-- file oc:check.svg from local or remote -->
</svg>
```
Commits
-------
28454b8 [Icons] Configure icon sets: path, alias & icon attributes
0 commit comments