[Resolved] SVG Icon — width 100% ?

[William]

Aloha Team,

When I want to add a purely decorative SVG icon to a page, I do the following:

1) Add a GB Headline

2) Set the Headline to DIV

3) Paste my SVG code in Headline Icon settings (where I have lots of controls).

Does this seem an ideal way to add a decorative SVG?

Follow-up question …

If I want the SVG icon above to auto-size itself to fill 100% width of whatever container it lives in, how would I do this?

The Heading properties give me PX and EM — but not %.

Can you offer an SVG 100% width solution?

This last round of GP/GB updates are AWESOME … my ‘branding’ person is THRILLED with Global Colors … so am I!!

Thanks as always 🙂

Bill

[Ying]

Hi Bill,

I think the better way to do this would be adding a GB container block, then insert a Custom HTML block in the Container block, paste the SVG code there.

If you want it to be full width, just need to set the GB container block and its inner block to full width.

Let me know if this helps 🙂

[William]

Thank you Ying 🙂

I’d lose the ability to pick a color for the SVG via the Headline block properties.

But … I would just manually add a fill to the SVG by adding, for example, fill=”red” …

or by defining/applying a CSS class that controls the fill?

Sound about right?

U da best 🙂

[Ying]

You can modify the SVG fillcolor to currentcolor, then the SVG should be using the text color you set for the container.

[William]

That works too … thank you!!

Based on the total # icons that need to be filled, I think I’m gonna go with a CSS class.

Thanks a million for steering me down a better road Yi!

Great stuff 🙂

[Ying]

You are welcome 🙂

[Author]

Posts