Skip to content

lozjackson/ember-svg-shapes

Repository files navigation

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