Custom SVG Icon Link List in SXA

How you can create a custom Rendering in Sitecore Experience Accelerator for a Link List with SVG icons.

Clone the ‘Link’ and ‘Link List’ Renderings

  • Navigate to /sitecore/layout/Renderings/Feature/Experience Accelerator/Navigation/
  • Right click the ‘Link’ item and choose Scripts, . Do the same for the ‘Link List’ item.
  • Make sure you have a to assign the new Renderings to.

In this example I named the New Renderings ‘Icon Link’ and ‘Icon Link List’ and have copied the original Rendering Parameters and Datasource, but used the original View (.cshtml)

I’ve also cloned the Link List, because I needed a recognizable component for the team and content editor, with a separate Data Folder and Rendering Variant Folder. You could skip cloning the Link List and make the new Icon Link available in the default SXA Link List.

These are the Templates that are created in my example.

Add an Icon field to the created Icon Link Template

  • Navigate to the Template of the new Icon Link /sitecore/templates/Feature/YourProject/YourNavigationModule/Icon Link
  • Add a Field named ‘Icon’ of the type ‘Droplink’
  • Set the Source to query:$site/Data/Icons//*[@@templatename=’SVG’]
SXA add icon to link with custom Rendering
SXA add icon to link with custom Rendering
Add an icon to the custom Icon Link Template

The query in the Source column (query:$site/Data/Icons//*[@@templatename=’SVG’]) refers to a location in the Data Folder (with Items of the ‘SVG’ Template) of the specific Site where the Rendering is used. This Data Folder with SVG items is not there yet and we will create later on.

When using a query like this you can have Site specific icons that can be managed by the team and content editor. You can also have one Data Folder in your Shared Site and use them in all Sites. Then you can just enter the path to that location in the Source Column, without a query.

Create a Template for the SVG code

  • Navigate to /sitecore/templates/Feature/YourProject/YourNavigationModule
  • Insert a new Template and name it SVG
  • Add a field ‘Code’ of the type Multi-Line Text
  • Also create a new Template ‘SVG Folder’. No fields needed, but add Standard Values so that you can add the SVG Items at the Insert Options.

Add a Data Folder and some SVG icons

  • Navigate to the Data Folder of your Site
  • Insert an item of the SVG Folder Template, name the folder ‘Icons’
  • Add some Icons and their SVG code.

In this example I used some free SVG of .

Add a Data Folder and some Icon Links

  • Navigate to the Data Folder of your Site
  • Insert an item of the Icon Link List Folder Template
  • Right click the folder and insert a Icon Link List item
  • Then in this Folder insert some Icon Link items

The Icon field shows a drop down of the Icons, which we just created.

In this example I added the Icon Link List to my Header Partial and set a query as Datasource: query:$site/Data/Icon Link Lists/Header/Header Left

Add a Rendering Variant for the Icon Link List

  • Navigate to the Rendering Variants in your Shared Site /sitecore/content/YourProject/Master/Presentation/Rendering Variants
  • Right click the Rendering Variant Folder and insert Variants, name the item ‘Icon Link List’
  • Right click the Variant and insert Variant Definition, name the item ‘Default’ (you can choose any name you find appropriate)
  • Add the custom Icon Link List to the compatible renderings. This is not mandatory.
  • Right click the Variant Definition ‘Default’ and insert a Section, name it ‘Link’ (name doesn’t matter here)
  • Keep Tag unselected, select ‘Wrapped’ at ‘Is Link’
  • Assign a data attribute ‘title’ with $(Description) as value
  • Assign a link attribute ‘href’ with $(Link) as value
  • Right click the ‘Link’ Section and insert a Scriban Variant Definition

With the function you can get fields of the selected item in the Icon field, in this case the ‘Code’ field of the SVG icon ‘Menu’.

This Scriban function {{ sc_follow i_item “Icon” | sc_raw “Code” }} renders the Mulit-Line Text field ‘Code’ in raw format.

Add the Icon Link List to a Page or Partial

  • Make sure you have added the Icon Link List to the Available Renderings of your Site, so that you can add it to a Page or Partial
  • Add the Icon Link List we created earlier to a Page or Partial via the Content Editor or Experience Editor
  • Assign the correct Variant

The result

In addition also create Data and Variants for the Icon Link itself. In my example I also added a field to the Icon Link to identify a collapsible target, for using the Icon Link as a toggle. You can add this value to the anchor as an data attribute.

Did you notice that all these steps are taken in Sitecore and no back-end code was written to achieve this? I want to thank Arjen van Veen and Guido van Tricht for answering all my never ending questions about Sitecore.

I love to hear what you think and how you create custom Renderings in SXA!

Front-end developer who loves working with Sitecore Experience Accelerator