<commit_before># Angular Inline Href

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

```html
<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:

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

You can also use it with JavaScript:

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

The resulting tag will look something like this:

```html
<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 ng-inline-href`
2. Import the directive into your shared module

```typescript
import { NgModule } from '@angular/core';
import { InlineHrefDirective } from 'ng-inline-href';

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

3. Add the library to your SystemJS config

```javascript
System.config({
  map: {
    'ng-inline-href': 'npm:ng-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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href); however, browser support
is not great, so this directive includes the namespace.<commit_msg>Remove SystemJS instructions from Setup in the README<commit_after># Angular Inline Href

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

```html
<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:

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

You can also use it with JavaScript:

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

The resulting tag will look something like this:

```html
<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 ng-inline-href`
2. Import the directive into your shared module and add it to the `declarations` and `exports` arrays

```typescript
import { NgModule } from '@angular/core';
import { InlineHrefDirective } from 'ng-inline-href';

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

3. 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href); however, browser support
is not great, so this directive includes the namespace.
{'fraction_non_alphanumeric': 0.1172093023255814, 'fraction_numerical': 0.0021705426356589145, 'mean_word_length': 4.403685092127303, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4504375', 'n_tokens_mistral': 1040, 'n_tokens_neox': 984, 'n_words': 392}