angular-inline-svg

AngularJS inline-svg component

• Include svg sprites one time at the top of the document.
• Use inline svg symbol using <use>.
• It is also possible to use angular binding, translations, directives, etc. in the svg sprite!

Requirements

• AngularJS

Usage

bower for dependency management. Install and save to bower.json by running:

$ bower install angular-inline-svg --save

Add the module to your application:

<script src="bower_components/angular-inline-svg/dist/ngInlineSvg.min.js"></script>
var myAppModule = angular.module('MyApp', ['inline-svg']);

Create a symbol sprite (e.g. mySvgSymbols.html) that looks like:

<svg xmlns="http://www.w3.org/2000/svg">
  <g id="myCircle">
     // circle drawing
  </g>
  <g id="myRectange">
     // rectange drawing
  </g>
  <g id="myLogo">
     // logo drawing
  </g>
</svg>

Include the directive in your html:

<inline-svg-symbol sprite="mySvgSymbols.html" symbol="'#myCircle'"/>
<inline-svg-symbol sprite="mySvgSymbols.html" symbol="'#myRectange'"/>
<inline-svg-symbol sprite="mySvgSymbols.html" symbol="'#myLogo'"/>

Contribute

Prepare your environment:

• Install Node.js and npm.
• Install global dev dependencies: npm install -g bower gulp
• Install local dev dependencies: npm install && bower install in repository directory

Development commands:

• npm run build - to clean, jshint, build and test
• npm run serve - to watch src files to jshint, build and test when changed

When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.