ng2-inline-href v1.0.0

Angular 2 Inline Href

This directive provides a fix for hrefs in Firefox. Notably, when trying to reference an inline SVG, as so:

<svg>
  <use xlink:href="#icon-back" />
</svg>

Because of the base tag, Firefox does not resolve the SVG symbol the way that you would expect. This directive simply appends the current path to the href, making it an absolute URL.

You can use this directive with a string:

<svg>
  <use inlineHref="#icon-back" />
</svg>

You can also use it with JavaScript:

<svg>
  <use [inlineHref]="getBackIcon()" />
</svg>

The resulting tag will look something like this:

<svg>
  <use xlink:href="http://www.myawesomesite.com/currentpage#icon-back" />
</svg>

Setup

Perform the following steps to add this directive to your project:

1. npm install --save ng2-inline-href
2. Import the directive into your shared module

import { NgModule } from '@angular/core';
import { InlineHrefDirective } from 'ng2-inline-href';

@NgModule({
  declarations: [ InlineHrefDirective ],
  exports: [ InlineHrefDirective ]
})
export class SharedModule {};

3. Add the library to your SystemJS config

System.config({
  map: {
    'ng2-inline-href': 'npm:ng2-inline-href/inline-href.js'
  }
});

4. Import the shared module into your other modules to use the directive in your templates

The Xlink Namespace

The xlink namespace on the SVG tag has been deprecated; however, browser support is not great, so this directive includes the namespace.