Ember-svg-shapes

Ember-svg-shapes provides some basic shapes in the form of svg images, wrapped in ember components.

Demo

http://lozjackson.github.io/ember-svg-shapes/

Installation

• ember install ember-svg-shapes

Available shapes

• svg-circle

  {{svg-circle
    size="10"
    fill="red"
    stroke="black"
    strokeWidth="1"
    rotate="45" }}

• svg-square

  {{svg-square
    size="10"
    fill="red"
    stroke="black"
    strokeWidth="1"
    rotate="45"
    radiusX="5"
    radiusY="10"}}

• svg-rectangle

  {{svg-rectangle
    size="1"
    fill="red"
    stroke="black"
    strokeWidth="2"
    rotate="45"
    height="20"
    width="30"
    radiusX="5"
    radiusY="10"}}

• svg-triangle

  {{svg-triangle
    size="10"
    fill="red"
    stroke="black"
    strokeWidth="1"
    rotate="180"
    direction="right"}}

• svg-star

  {{svg-star
    size="50"
    fill="red"
    stroke="black"
    strokeWidth="2"
    rotate="45"
    starPoints="5"
    innerPoints="1.4"}}

All the parameters are optional.

Styling

Add css class names to the component and style as you would normally do with an svg element.

.svg-triangle.green {
    fill: rgb(152, 208, 46);
}

{{svg-triangle class="green"}}

Troubleshooting

If you get an error saying:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".

You need to add/modify the content security policy directive. In the config/environment.js file you need to have 'unsafe-inline' in the style-src.

ENV.contentSecurityPolicy = {
  'style-src': "'self' 'unsafe-inline'"
}

Compatibility

Ember version >= 1.13.13

Change Log

• #8 Update to Ember-cli 2.12.1

v1.0.0 2017-01-25

• #7 Use object destructuring.

• #6 Update to Ember-cli 2.11.0

v0.1.1 2016-09-03

• Add Phantomjs dev-dependency.

• Configure Ember-try to include Ember ~2.4.0 (LTS).

• Update to Ember-cli 2.7.0

v0.1.0 2016-03-26

• [FEATURE] Add svg-filters component.

• [FEATURE] Add filter-drop-shadow component.

• [FEATURE] Add filter mixin.

• Update to Ember-cli 2.4.2

v0.0.2 2015-09-23

• [FEATURE] The size property of the svg-rectangle component can now be used to multiply the height and width values.

• [FEATURE] Add the transform attribute to svg-circle, svg-square and svg-rectangle components.

• [BUGFIX] Set css overflow property to visible. Fixes issue #1

• [FEATURE] Make the stroke property default to 'black'.

• [BUGFIX] Fix svg-star component's points computed property to bind to the innerPoints property.

• [BUGFIX] Update the min and max values of the svg-star component's innerPoints property.

• Add rect mixin.

v0.0.1 2015-09-20

• initial release