Component button that bind a background image

#1

Hello everyone,

I’m trying to create a button component that changes depending on an icon. I found a very nice trick using a CSS mask (so I can change the “icon” color) but binding on style attributes is now depreciated by Ember. How can I create a such style that binds the @icon attributes inside the component.js ?

<LinkTo @route={{if this.isCurrentRoute 'index' @route}} ...attributes>
<div local-class="img" style="-webkit-mask: url('../icons/{{@icon}}.svg');
  mask: url('../icons/{{@icon}}.svg')"/>
{{yield}}

I’m a new ember user so thanks a lot for your help !

#2

This is for security purposes, if the styles are not escaped it could open up vulnerability to CSS injection attacks. There is a utility called htmlsafe that you can use to escape the styles properly. You could make a computed property that computes the style attribute or you could probably write a custom helper that wraps your style string (or I think ember-cli-string-helpers has one already).

#3

Thanks a lot @dknutsen, it worked like a charm ! It’s a very nice toolbox, it had already helped me on an other topic :smile:

1 Like