Component button that bind a background image

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 posts - 2 participants

Read full topic