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