Creating an icon component?

Design help General
1

:slight_smile: Hello,

I’m new to Webflow, even though I have a front-end developer background.

I’m trying to create a user friendly Icon component for the marketing team.
Regarding the pre-requisites, I need to be able to select the icon and select it’s color.

Where I am at the moment:

  1. I’ve created an SVG sprite sheet with all my icons. Something like this:
<svg style="display:none;">
  <symbol id="twitter-icon" viewBox="0 0 32 32">
    <path d="M32 6.076c-1.177 …" fill="currentcolor"></path>
  </symbol>
  <symbol id="instagram-icon" viewBox="0 0 32 32">
   <!-- icon contents -->
  </symbol>
  <!-- etc. -->
</svg>
  1. I’ve created an Icon CMS collection with one field name.
  2. I’ve created an Embed element with the code:
<svg class="icon">
  <use xlink:href="#twitter-icon"></use>
<svg>

What I’m missing:

I need to be able to make it dynamic and adding the possibility to simply change the icon.

What I tried:

  • Creating a collection list
  • Limiting the collection to 1 item
  • Mapping the property Icon name in the Embed element:
<svg class="icon">
  <use xlink:href="#{{icon name}}"></use>
<svg>
  • To change the color of the icon, I just need to change the color of the parent and the icon will inherit the color.

The issues:

  • To select the icon, I have to filter the collection with “icon name =” and set the name… it’s not user friendly, how could I have a dropdown instead?
  • It creates a lot of spaghetti <div>, is it possible to display one element of a collection instead of displaying a filtered collection list?