statamic / ideas

💡Discussions on ideas and feature requests for Statamic
https://statamic.dev
30 stars 1 forks source link

Icon Fieldtype option to return path to an SVG #1030

Closed jasonbaciulis closed 10 months ago

jasonbaciulis commented 10 months ago

When using Icon Fieldtype, sometimes I need to pass attributes into an SVG, so I would prefer to output Icon fieldtype using tag {{ svg :src="icon" class="w-6 h-6" }} instead of {{ icon }}. So having an option to choose an Icon fieldtype to return a path would be useful.

Because otherwise, I need to wrap with an extra span <span class="w-6 h-6">{{ icon }}</span>.

Also, this helps with components that have an SVG tag and expect a path, but sometimes it could come from an icon fieldtype, other times from an asset.

jasonvarga commented 10 months ago

You can use {{ icon | raw }} to get the name of the svg itself.

{{ svg src="path/to/svg/{icon|raw}.svg" class="w-6 h-6" }}
jasonbaciulis commented 10 months ago

Oh, that's neat. That solves it, thanks!

It would be helpful to mention this tip in the docs inside Templating examples: https://statamic.dev/fieldtypes/icon#templating