# react-svg-inline

> A React component to inline your SVGs.

Latest version **2.1.1** (published 2018-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-svg-inline
pnpm add react-svg-inline
yarn add react-svg-inline
bun add react-svg-inline
```

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2018-06-07 |
| First published | 2015-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-svg-inline) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Maxime Thirouin |
| Maintainers | moox |
| Keywords | react, svg, icon, inline |

## Links

- npm: https://www.npmjs.com/package/react-svg-inline
- Repository: https://github.com/MoOx/react-svg-inline
- Homepage: https://github.com/MoOx/react-svg-inline#readme
- Issues: https://github.com/MoOx/react-svg-inline/issues
- npm.io page: https://npm.io/package/react-svg-inline

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2018-06-07
- 2.1.0 — 2018-01-22
- 2.0.1 — 2017-10-12
- 2.0.0 — 2017-04-18
- 1.2.0 — 2016-07-06
- 1.1.0 — 2016-03-14
- 1.0.1 — 2015-12-08
- 1.0.0 — 2015-12-03

## README

# react-svg-inline

[![Travis (Unix) Build Badge](https://img.shields.io/travis/MoOx/react-svg-inline/master.svg?label=unix+build)](https://travis-ci.org/MoOx/react-svg-inline)

> A react component to clean and display raw SVGs.

## Install

```console
$ npm install react-svg-inline
```

You might also need to `npm install raw-loader` if you want to use this with
webpack.

## Usage

Here is an example of a usage in a React stateless component:

```js
import React from "react"
import SVGInline from "react-svg-inline"

export default () => (
  <div>
    <SVGInline svg={"<svg....</svg>"} />
  </div>
)
```

# Webpack to `require()` SVGs

Use the raw-loader to require() raw SVGs files and pass them to
`react-svg-inline`.

```js
module.exports = {
  loaders: [
    {
      test: /\.svg$/,
      loader: 'raw-loader'
    }
  ]
}

```

```js
import React from "react"
import SVGInline from "react-svg-inline"
import iconSVG from "./myicon.svg"

export default () => (
  <div>
    <SVGInline svg={ iconSVG } />
  </div>
)
```

## Options (props)

### className

``PropTypes.string``

Class name used for the component that will wrap the SVG.

### classSuffix

``PropTypes.string``

The class suffix that will be added to the svg className (default: "-svg").

### component

``PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.func,
]),``

The component that will wrap the svg (default: `span`).

### svg

``PropTypes.string.isRequired``

### fill

``PropTypes.string``

Color to use

### cleanup

``PropTypes.oneOfType([
  PropTypes.bool,
  PropTypes.array,
])``

This allow you to cleanup (remove) some svg attributes.
Here are the supported value that can be removed:

- title
- desc
- comment
- defs
- width
- height
- fill
- sketchMSShapeGroup
- sketchMSPage
- sketchMSLayerGroup

If cleanup === true, it will remove all the attributes above.

### cleanupExceptions

``PropTypes.array``

This allow you to whitelist some svg attributes to keep while cleaning some
others.

### width

``PropTypes.string``

### height

``PropTypes.string``

### accessibilityLabel

``PropTypes.string``

This value is added as an svg `<title>` element that is accessible to screen readers.
(Note: when this option is used, an SVG `id` attribute will be automatically injected).

### accessibilityDesc

``PropTypes.string``

This value is added as an svg `<desc>` element that is accessible to screen readers.

---

## CONTRIBUTING

* ⇄ Pull requests and ★ Stars are always welcome.
* For bugs and feature requests, please create an issue.
* Pull requests must be accompanied by passing automated tests (`$ npm test`).

## [CHANGELOG](CHANGELOG.md)

## [LICENSE](LICENSE)

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