# ng-inline-href

> Angular Directive that fixes links to inline SVGs in Firefox

Latest version **2.1.2** (published 2017-09-11) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install ng-inline-href
pnpm add ng-inline-href
yarn add ng-inline-href
bun add ng-inline-href
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2017-09-11 |
| First published | 2017-04-21 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Tyler Smith |
| Maintainers | tsmith18256 |
| Keywords | angular, directive, firefox, svg, use, xlink, href |

## Links

- npm: https://www.npmjs.com/package/ng-inline-href
- Repository: https://github.com/Tsmith18256/ng-inline-href
- Homepage: https://github.com/Tsmith18256/ng-inline-href#readme
- Issues: https://github.com/Tsmith18256/ng-inline-href/issues
- npm.io page: https://npm.io/package/ng-inline-href

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 2.1.2 (latest) — 2017-09-11
- 2.1.1 — 2017-09-04
- 2.1.0 — 2017-06-18
- 2.0.6 — 2017-06-07
- 2.0.5 — 2017-06-06
- 2.0.4 — 2017-04-24
- 2.0.3 — 2017-04-24
- 2.0.2 — 2017-04-23
- 2.0.1 — 2017-04-21
- 2.0.0 — 2017-04-21

## README

# 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.

---
_Source: https://npm.io/package/ng-inline-href · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._