SVG's in Buttons and Icons

Feature Requests
1

I’ve recently developed a custom SVG component that allows for dynamic updates to stroke and fill colors and color inheritance. While the component works well independently, I’ve noticed some limitations when integrating it with Anvil’s Button and Link components.

When an SVG is embedded into a Button or Link, the color inheritance feature doesn’t function as expected. This is because the SVG is converted into an image, losing its ability to inherit colors.

Feature Request for Anvil:
I’d like to propose an enhancement to Anvil’s Button and Link components. It would be handy if these components could natively support SVGs, primarily when used as icons. Specifically, if an SVG’s fill and/or stroke is set to currentColor, it should inherit the foreground color set in the Button or Link.

This feature would make creating cohesive and dynamic UI elements in Anvil applications much more accessible.

1 Like
2

Hi Chad,

As a workaround for your problem you may try to put all SVG icons in a custom font and apply a little CSS. That way you can inherit colors etc.

By using .fa-NameofIcon within the CSS it behaves just like any character from FontAwesome.

(you can call it with FA:NameofIcon )

@font-face {
  font-family: 'Icons';
  src: url("_/theme/Icons/icons.woff") ;
}

.fa-NameofIcon:before {
  content:"C"; /*should be the name of your icon */
  font-family:"icons";
}
3

Hi @Arne - would you mind expanding a little on this please, as I’d like to try it. Maybe a specific real example if you have the time?

I can’t immediately see the relationship between “Icons”, “icons”, “icons.woff”, “NameofIcon” and “C”, if you see what I mean.

Thanks.

4

Hi @david.wylie,

sure. Let us say you have 2 icons called Pencil.svg and Eraser.svg. First you create a custom font out of them. I used https://glyphter.com for that purpose (no idea if other services are better, it was the first google result, worked well and was free…).

Let us further assume you used the character ‘P’ for the Pencil.svg and ‘E’ for Eraser.svg (you’ll understand what I mean once you go to that Glyphter homepage). I’ll further assume you downloaded the Font, named it ‘icons.woff’ and saved it in the assets in a folder called ‘Icons’.

Next you add the following to the CSS:

/*this makes the CSS aware of your custom font*/
@font-face {
  font-family: 'icons';
  src: url("_/theme/Icons/icons.woff") ; 
}

/*this will make a "standard" icon out of it*/
.fa-Eraser:before {   
  content:"E"; /*that is the character E for the Eraser icon */
  font-family:"icons";
}

  /*here is some more CSS to adjust the position of the icon */
.fa-Pencil:before {   
  content:"P"; /*that is the character P for the Pencil icon */
  font-family:"icons";
  position: relative;
  top: 4px;
  line-height: 0px;
  font-size: 18px;
}

Next you can use and call your custom Icons just like any icon within anvil. So in the UI editor you go to icons and put “fa:Eraser” and you have your Eraser - Icon. They will behave just like the standard Icons that ship with Anvil. So the colors match etc.

Here is link to an Example:

2 Likes
5

That’s brilliant - thank you so much for taking the time to do that!