ngInclude and SVGs =

Of late I have been deep in Angular land and I just thought I’d share a little discovery that I was shown by a fellow work college (@dylanFM) the other day.

It’s nothing mind boggling but if you prefer to work with your SVGs inline and are a little OCD in the way your code looks you might enjoy this tip.

So Angular has a handy built-in directive called “ngInclude” and funnily enough, it can include stuff.

Fetches, compiles and includes an external HTML fragment.

Utilising ngInclude means that we can do away with having the full SVG source polluting our template files and just reference them like so:

<div ng-include="'assets/your.svg'"></div>

Note – Be sure to wrap your image path in single quotes, e.g. src=”‘assets/your.svg'”.

And Angular will do its magic and output the SVG inline like so:

<div ng-include="'assets/your.svg'" class="ng-scope">
  <svg>
    ...
  </svg>
</div>

High five to clean templates files!

The post ngInclude and SVGs = <3 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly