# typed-svg

> Typed SVG is a webpack plugin to generate types for SVG sprites.

Latest version **0.6.0** (published 2020-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install typed-svg
pnpm add typed-svg
yarn add typed-svg
bun add typed-svg
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2020-06-10 |
| First published | 2020-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 15.3 KB |
| Known vulnerabilities | 0 (+17 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jonathan Fleckenstein |
| Maintainers | jfleckenstein |

## Links

- npm: https://www.npmjs.com/package/typed-svg
- Repository: https://github.com/fleck/typed-svg
- npm.io page: https://npm.io/package/typed-svg

## Dependencies (2)

- [xmldom](https://npm.io/package/xmldom.md) ^0.3.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1

## Recent versions

- 0.6.0 (latest) — 2020-06-10
- 0.5.0 — 2020-06-10
- 0.4.0 — 2020-06-10
- 0.3.0 — 2020-06-10
- 0.2.0 — 2020-06-10
- 0.1.0 — 2020-06-09

## README

# Typed SVG
Typed SVG is a webpack plugin to generate types for SVG sprites.

## Install
```bash
yarn add typed-svg

# or npm
npm install typed-svg
```

## Setup
This plugin is intended to be used in conjunction with file-loader.

```js
// webpack.config.js
import { TypedSVGWebpackPlugin } from "typed-svg";
{
  plugins: [
    new TypedSVGWebpackPlugin(),
  ]
}
```

## Usage
This plugin will compile a type for any svg that ends with the name **.sprite.svg**
While this example is done in React, there's nothing React specific to this plugin.

```tsx
// Icon.tsx
import React from "react";
import spritePath, { Symbols } from "./sprite.svg";

export interface IconProps extends React.SVGProps<SVGSVGElement> {
  name: Symbols;
}

export default (props: IconProps) => (
  <svg>
    <use xlinkHref={`${spritePath}#${props.name}`} />
  </svg>
);
```

```xml
<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="shopping-cart">
      <path />
    </symbol>
    <symbol id="search">
      <path />
    </symbol>
  </defs>
</svg>
```

Given the files above a spite.svg.d.ts file will be generated when webpack is run. This file will be placed next to sprite.svg.
```ts
// spite.svg.d.ts
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
declare const _default: string;
export default _default;

export const symbol: "shopping-cart" | "search";
```

## Why
Shipping SVGs as React components is simple, but can dramatically bloat the size of JavaScript bundles. This plugin aims to make using the browsers `<svg>` and `<use>` tags safer. Without types it's all to easy to have a mismatch between the id used in your `<use>` tag and the id of the SVG symbol.

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