Merge pull request #17 from sitegeist/combined-identifier

FEATURE: Add combined `identifier` for icons
sitegeist · Jul 25, 2023 · b5016ba · b5016ba
2 parents a4a623e + 5004dcd
commit b5016ba
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 32 deletions.
diff --git 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`
-        <Sitegeist.Stampede:Icon collection="default" icon="neos" />
+        <Sitegeist.Stampede:Icon identifier="default:neos" />
     `
 ```
 
 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`
-        <Sitegeist.Stampede:Icon collection="default" icon="neos" inline />
+        <Sitegeist.Stampede:Icon identifier="default:neos" inline />
     `
 ```
 
 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
@@ -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}
                 >
                     <use>
-                        <Neos.Fusion:UriBuilder @path='attributes.xlink:href' package="Sitegeist.Stampede" controller="Svg" action="sprite" arguments={{collection:props.collection}} additionalParams={SitegeistKlarSchiffCacheBuster ? {cb:SitegeistKlarSchiffCacheBuster.get()} : null} section={props.icon} />
-                        <Neos.Fusion:UriBuilder @path='attributes.href' package="Sitegeist.Stampede" controller="Svg" action="sprite" arguments={{collection:props.collection}} additionalParams={SitegeistKlarSchiffCacheBuster ? {cb:SitegeistKlarSchiffCacheBuster.get()} : null} section={props.icon} />
+                        <Neos.Fusion:UriBuilder @path='attributes.xlink:href' package="Sitegeist.Stampede" controller="Svg" action="sprite" arguments={{collection:private.collectionAndIcon[0]}} additionalParams={SitegeistKlarSchiffCacheBuster ? {cb:SitegeistKlarSchiffCacheBuster.get()} : null} section={private.collectionAndIcon[1]} />
+                        <Neos.Fusion:UriBuilder @path='attributes.href' package="Sitegeist.Stampede" controller="Svg" action="sprite" arguments={{collection:private.collectionAndIcon[0]}} additionalParams={SitegeistKlarSchiffCacheBuster ? {cb:SitegeistKlarSchiffCacheBuster.get()} : null} section={private.collectionAndIcon[1]} />
                     </use>
                 </svg>
             `
@@ -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}
                 </Neos.Fusion:Augmenter>
             `
         }

diff --git 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": {