diff --git a/README.md b/README.md
index 7d67497..be23742 100644
--- a/README.md
+++ b/README.md
@@ -80,58 +80,45 @@ A custom data source is included to allow editors to select icons in the Neos In
collections: ['example']
```
-*Attention the returned value of the data source is a combined identifier of the
-collection and the icon separated by colon. For rendering you have to split it before passing
-`collection` and `icon` to `Sitegeist.Stampede:Icon`:
-
-```
-prototype(Vendor.Site:Component.SvgIcon) < prototype(Neos.Neos:ContentComponent) {
- parts = ${String.split(q(node).property('icon'), ':', 2)}
-
- renderer = Sitegeist.Stampede:Icon {
- collection = ${props.parts[0]}
- icon = ${props.parts[1]}
- }
-}
-```
### Mixins, Presets, Silhouettes
The package contains the Mixin `Sitegeist.Silhouette:Mixin.Icon` and the property-preset / silhouette `stampede.icon`.
## Fusion
-
`Sitegeist.Stampede:Icon` has the following options:
-`collection`: string (required) name of the icon collection
-`icon`: string (required) name of the icon
+`identifier`: string (required) combined identifier of `collection` and `icon` separated by a `colon`. Will override `collection` and `icon` values
+`collection`: string (deprecated, use `identifier` in future) name of the icon collection
+`icon`: string (deprecated, use `identifier` in future) name of the icon
`class`: string (optional) class to add to the svg tag
`style`: string (optional) style to add to the svg tag. Default is `fill: currentColor; height: 1em;`
`inline`: boolean render the svg inline. Default is `false`
To render icons the prototype `Sitegeist.Stampede:Icon` is used via afx like this.
-```
+
+```neosfusion
renderer = afx`
-
+
`
```
If the `inline` option is set the svg content is directly put into the html instead of referencing
the spritesheet. This can improve the performance if many icons exist but only very few are used on a single page.
-```
+
+```neosfusion
renderer = afx`
-
+
`
```
ATTENTION: It is highly recommended to create a wrapper prototype for icons that sets the required `class` and unsets the default `style`.
-```
+```neosfusion
prototype(Vendor.Site:Component.SvgIcon) < prototype(Neos.Fusion:Component) {
- icon = null
- collection = 'default'
+ identifier = null
renderer = Sitegeist.Stampede:Icon {
- collection = ${props.collection}
+ identifier = ${props.identifier}
icon = ${props.icon}
class = "svgIcon"
style = null
diff --git a/Resources/Private/Fusion/Icon.fusion b/Resources/Private/Fusion/Icon.fusion
index b1b01f9..60cee10 100644
--- a/Resources/Private/Fusion/Icon.fusion
+++ b/Resources/Private/Fusion/Icon.fusion
@@ -1,14 +1,20 @@
prototype(Sitegeist.Stampede:Icon) < prototype(Neos.Fusion:Component) {
+ identifier = null
collection = null
icon = null
+
class = null
style = 'fill: currentColor; height: 1em;'
inline = false
viewBox= '0 0 512 512'
+ @private {
+ collectionAndIcon = ${props.identifier ? String.split(props.identifier, ':', 2)[0] : [props.collection, props.icon]}
+ }
+
renderer = Neos.Fusion:Case {
- @if.has = ${props.collection && props.icon}
+ @if.has = ${private.collectionAndIcon[0] && private.collectionAndIcon[1]}
sprite {
condition = ${!props.inline}
renderer = afx`
@@ -21,8 +27,8 @@ prototype(Sitegeist.Stampede:Icon) < prototype(Neos.Fusion:Component) {
style={props.style}
>
`
@@ -35,7 +41,7 @@ prototype(Sitegeist.Stampede:Icon) < prototype(Neos.Fusion:Component) {
class={props.class}
style={props.style}
>
- {Stampede.icon(props.collection, props.icon).svg}
+ {Stampede.icon(private.collectionAndIcon[0], private.collectionAndIcon[1]).svg}
`
}
diff --git a/composer.json b/composer.json
index d6569f6..0b3112b 100644
--- a/composer.json
+++ b/composer.json
@@ -1,10 +1,9 @@
{
- "description": "svg-sprite icons for neos",
+ "description": "svg-sprite icons for Neos",
"type": "neos-package",
"name": "sitegeist/stampede",
"require": {
- "neos/fusion": "^7.0 || ^8.0 || dev-master",
- "neos/fusion-afx": "^7.0 || ^8.0 || dev-master"
+ "neos/fusion": "^8.3 || ^9.0 || dev-master"
},
"license": "GPL-3.0-or-later",
"suggest": {