/**
  @module ember-svg-shapes
*/
import Ember from 'ember';

/**
  @class SvgMixin
  @namespace SvgShapes
*/
export default Ember.Mixin.create({

    /**
      @property tagName
      @type {String}
      @private
      @default 'svg'
    */
    tagName: 'svg',

    /**
      @property attributeBindings
      @type {Array}
      @default ['style']
      @private
    */
    attributeBindings: ['style'],

    /**
      This is a computed property.  It sets the height and width of the svg element.
      @property style
      @type {String}
      @private
    */
    style: Ember.computed('size', function() {
        var size = this.get('size');
        return Ember.String.htmlSafe('width:' + size + 'px; height:' + size + 'px;');
    }),

    /**
      @property stroke
      @type {String}
    */
    stroke: '',

    /**
      @property strokeWidth
      @type {Number}
      @default 0
    */
    strokeWidth: 0,

    /**
      @property fill
      @type {String}
    */
    fill: ''
});

@@ -95,24 +95,31 @@
 ce SvgShapes
+.Mixins
 %0A*/%0Aexport d
@@ -763,77 +763,362 @@
     
-@property stroke%0A      @type %7BString%7D%0A    */%0A    stroke: '',%0A%0A    /**
+The stroke color.  Use this with %60strokeWidth%60 to set a border around the shape.%0A%0A        %7B%7Bsvg-triangle stroke=%22blue%22 strokeWidth=%222%22%7D%7D%0A%0A      @property stroke%0A      @type %7BString%7D%0A    */%0A    stroke: '',%0A%0A    /**%0A      The stroke width.    Use this with %60stroke%60 to set a border around the shape.%0A%0A        %7B%7Bsvg-triangle strokeWidth=%222%22 stroke=%22blue%22%7D%7D%0A
 %0A   
@@ -1208,32 +1208,97 @@
 th: 0,%0A%0A    /**%0A
+      The fill color.%0A%0A            %7B%7Bsvg-triangle fill=%22blue%22%7D%7D%0A%0A
       @property 

update svg mixin