Forum

Thread tagged as: Question

Select SVG icon as part of template

Hi,

I am working on a site where I need the client to be able to select an SVG icon as part of a template. These are not to uploaded as an asset, but will be pre-created and in a folder, and presented as a select box where the client can pick one. This would then ideally be output as an inline SVG on the page. The template would look something like this:

<perch:content id="heading" type="text" label="Heading" required="true" />
<perch:content id="icon" type="select" label="Feature Icon"
options="Heart,Star,Person ..." />
<perch:content id="body" type="textarea" label="Feauture Information" markdown="true" editor="markitup" />

I am not really sure where to start with this one, if anyone has any pointers for this workflow that would be great.

Mike

Mike Harrison 37 points

3 years ago

Jay George 2 points

3 years ago

Something like this (this is me using Icomoon's system)…

<svg class="icon icon--<perch:content id="icon-name" type="select" label="Icon" options="Male|male, Female|female, Mixed|mixed, Private|private, Bunk Beds|bunk-beds" allowempty="true"/>">
    <use xlink:href="/svg-icons/symbol-defs.svg#icon--<perch:content id="icon-name"/>"></use>
</svg>

Mike Harrison 37 points

3 years ago

That's perfect thanks Jay