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-circlesize="10"fill="red"stroke="black"strokeWidth="1"rotate="45" }} -
svg-square
{{svg-squaresize="10"fill="red"stroke="black"strokeWidth="1"rotate="45"radiusX="5"radiusY="10"}} -
svg-rectangle
{{svg-rectanglesize="1"fill="red"stroke="black"strokeWidth="2"rotate="45"height="20"width="30"radiusX="5"radiusY="10"}} -
svg-triangle
{{svg-trianglesize="10"fill="red"stroke="black"strokeWidth="1"rotate="180"direction="right"}} -
svg-star
{{svg-starsize="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 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
.
ENVcontentSecurityPolicy = 'style-src': "'self' 'unsafe-inline'"
Compatibility
Ember version >= 1.13.13