I've created a simple component to render icons from SVG sprite. This component should have a default CSS class to manage it's styles globally (.svg-icon). Also, I want to have a possibility to add some context dependent styles via class names through 'class' attribute.
JS:
App.SvgIconComponent = Ember.Component.extend
layoutName: 'components/svg-icon'
classNames: ['svg-icon']
tagName: 'svg'
attributeBindings: ['width', 'height', 'fill'],
width: 16
height: 16
fill: 'currentColor'
Template:
<use xlink:href="#svg-icon-"/>
Usage:
HTML output:
<svg id="ember1012" width="14" height="14" fill="currentColor" class="social__icon ember-view svg-icon">
<use xmlns:xlink="http://ift.tt/PGV9lw" xlink:href="#svg-icon-facebook"></use>
</svg>
The problem is that Ember pushed my default class (.svg-icon) into the end of classes list. But, to avoid some issues with cascade, I need this class at the start of classes list (class="svg-icon social__icon ember-view"). Is it possible to achieve?
I know, that I can set classes names with classNameBindings property, but in this case I will need to use some attribute different from 'class'. Use of native 'class' attribute is preferable.
Thnx.
Aucun commentaire:
Enregistrer un commentaire