Custom color for SVG Icon

[CSarzana]

Hello,

I'm trying to create a custom module.

I added an icon field and a color field to set the icon color. Both these field are under a group field named "team_member".

I'm trying to set the icon color via css:

.icon svg {
fill: {{ module.team_member.icon_color.color }};
opacity: {{ module.team_member.icon_color.opacity }};
width: 32px
}

But it doens't work.

Can someone help me?

Thanks

[dennisedson]

Hey @CSarzana 

If you want to put inside  that loop, you will need to do a couple things

1. each iteration of the loop needs to have an identifier to make it unique.  We can solve this by using {{ loop.index }}.  So with that add an id to your team box like this

 <div id="team-box{{loop.index}}"class="team-box"> all the stuff that goes inside </div>

2. Now, you would add that icon_color_and_opacity field back into the repeater group as well as the icon style

3. Once back in the group, we will rewrite the style to include that new id we gave to the div.  The new style block should look like this

<style>
{# Icon Color #}
        #team-box{{loop.index}} .icon svg {
       	fill: {{ item.icon_color_and_opacity.color }};
        opacity: {{ item.icon_color_and_opacity.opacity/100 }};
        width: 32px
      }
</style>

Now each of the svgs can have its own unique color 😀

[CSarzana]

Thanks Dennis,
and how can I put the icon color inside the array? Or in a "social icon array"?
Thanks again

[CSarzana]

Hi Dennis,
Thank you. Can you help me write down this part?
I don't know how to do so...

Thanks

[dennisedson]

Hey @CSarzana ! 

For sure.  Going to write for the easier of the two possibilities which will assume that you want all of the icons to be the same color

Drag the Icon color and opacity field out of the team member group. 

In that style block, remove .team_member from the hubl. 

Also, you will need to do a bit of modification for the opacity as it will return a whole number (eg 100)

To get it right, you will divide by 100

Will look like this:

.icon svg {
       	fill: {{ module.icon_color_and_opacity.color }};
        opacity: {{ module.icon_color_and_opacity.opacity/100 }};
        width: 32px
 }

BAM.  You are done 😀

[RRimestad9]

Hi again!

As you can see in the output from {{ module }}, there is no field called icon_color_and_opacity, so no value is going to appear in the CSS. Have you published the changes in the fields for this module?

[CSarzana]

Hi again, I see there is no field output but I don't know why.
My module code is the one posted above and this is a screenshot of the field group.

[dennisedson]

Hey @CSarzana 

The reason nothing is printing is because the color is within a repeater so you will have to include it in your for loop.

And, if you do include it in the loop, I would use an inline style rather than in a style block because it is just going to repeat the style block x amount of times and whatever the last one is set to will be applied to all.

If you do not need to individually apply the color to the icons and instead want them all to be the same, you will want to take the Icon color and opacity field out of that repeater.

[CSarzana]

I suppose that if I create a repeatable field group "icon" with icon field and color (so I can add other social icons under team profile) and I put this field group under the team_member group, the problem is the same...

[CSarzana]

I create the team_member just grouping some fields... Is it an error?

[CSarzana]

{# background #}
{{ module }}

<div id="team" {% if module.background_option.background_type == 'color' %} style="background-color:{{ module.background_option.color_field.color }};"
{% elif module.background_option.background_type == 'image' %} style="background-image:url('{{ module.background_option.background_image.src }}');"
{% endif %}>

<h2 class="lightblue text-center">{{ module.title }}</h2>
<p>{{ module.description }}</p>

<div class="container">
{% for item in module.team_member %}
<div class="team-box" {% if module.grid_option == 'three-column' %} class="span4" {% elif module.grid_option == 'four-column' %} class="span3" {% endif %}>

<img src="{{ item.team_image.src }}" alt="{{ item.team_image.alt }}" width="{{ item.team_image.width }}" height="{{ item.team_image.height }}">
<h4 class="blue">{{ item.team_member_name }}</h4>
<p>{{ item.role }}</p>
<a href="{{ item.social_url.href }}" target="_blank" class="icon">{% icon
name="{{ item.social_icon.name }}"
style="{{ item.social_icon.type }}"
unicode="{{ item.social_icon.unicode }}"
icon_set="{{ item.social_icon.icon_set }}"
%}</a>
</div>
{% endfor %}
<div class="clearfix"></div>
</div>

</div>

{% require_css %}
<style>

{# Icon Color #}
.icon svg {
fill: {{ module.team_member.icon_color_and_opacity.color }};
opacity: {{ module.team_member.icon_color_and_opacity.opacity }};
width: 32px
}
</style>
{% end_require_css %}

[RRimestad9]

I see you added that code, and I think I see your problem.

team_member is actually an array, so you cannot access the color directly like that. Can you post the module.html code here, then we can see if we can rewrite it.

[CSarzana]

Yes, sure. Done.

Please, take note that the field "image and color opacity" is not render in visual display.

[RRimestad9]

It seems as if the values you pass in are empty:

Are you sure you  have set a color and an opacity here? Can I see the fields.json file for this module?

[CSarzana]

I've seen the same problem but I'm almost sure the field is set correctly.

If I put the field out of the group and use the correct value, it works properly. When I put it under the group, it crashes.
I also set a default value of color and opacity (that is not black)

How can I show you my module? Where can I find the fields.json?

I'm sorry but I'm pretty new here 😉

[RRimestad9]

I assume you are using the HubSpot GUI, so showing me the fields.json file is a bit difficult, then.

Could you, at the top of your module.html file, add this line:

{{ module }}

That will output some data on the preview page, which we can then use to do some more debugging.

[RRimestad9]

Can you send a preview link of a page where you use this module?

[CSarzana]

Hi, this is the preview link:

https://indoostry.hubspotpagebuilder.com/-temporary-slug-9d8e3ce4-6469-4743-8604-00ffaaaf9313?hs_pre...

The module is used in the "team section". I'm trying to make custom the Linkedin icon color.