# sanity-plugin-inline-svg

> Sanity.io studio plugin to upload and display SVG files inline.

Latest version **1.0.3** (published 2020-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install sanity-plugin-inline-svg
pnpm add sanity-plugin-inline-svg
yarn add sanity-plugin-inline-svg
bun add sanity-plugin-inline-svg
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-09-24 |
| First published | 2019-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 (+8 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Artem Artemov |
| Maintainers | artemartemov |
| Keywords | sanity.io, svg, upload, sanity, studio, plugin, sanity, plugin |

## Links

- npm: https://www.npmjs.com/package/sanity-plugin-inline-svg
- Repository: https://github.com/artemartemov/sanity-plugin-inline-svg-upload-preview
- Homepage: https://github.com/artemartemov/sanity-plugin-inline-svg-upload-preview#readme
- Issues: https://github.com/artemartemov/sanity-plugin-inline-svg-upload-preview/issues
- npm.io page: https://npm.io/package/sanity-plugin-inline-svg

## Dependencies (6)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [sanitize-html](https://npm.io/package/sanitize-html.md) ^1.20.1
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [react-sanitized-html](https://npm.io/package/react-sanitized-html.md) ^2.0.0
- [babel-plugin-syntax-class-properties](https://npm.io/package/babel-plugin-syntax-class-properties.md) ^6.13.0
- [babel-plugin-transform-class-properties](https://npm.io/package/babel-plugin-transform-class-properties.md) ^6.24.1

## Recent versions

- 1.0.3 (latest) — 2020-09-24
- 1.0.2 — 2019-09-27
- 1.0.1 — 2019-09-27
- 1.0.0 — 2019-09-27
- 0.0.1-alpha-v4 — 2019-09-26
- 0.0.1-alpha-v3 — 2019-09-26
- 0.0.1-alpha-v2 — 2019-09-26
- 0.0.1-alpha-v1 — 2019-09-26
- 0.0.1-alpha — 2019-09-26
- 0.0.1 — 2019-09-26

## README

# sanity-plugin-inline-svg

Inline SVG Upload and Preview for [Sanity](https://www.sanity.io/)

[![npm version](https://img.shields.io/npm/v/sanity-plugin-inline-svg?style=for-the-badge)](https://www.npmjs.com/package/sanity-plugin-inline-svg)
[![license](https://img.shields.io/github/license/artemartemov/sanity-plugin-inline-svg-upload-preview?style=for-the-badge)](https://github.com/artemartemov/sanity-plugin-inline-svg-upload-preview/blob/master/LICENSE)

## Installing

In your Sanity studio folder, run:

```
sanity install sanity-plugin-inline-svg
```

## Features

- Upload SVG as string that gets injected as HTML into a preview container
- Use on arrays to build a group of inline SVGs


## Basic usage

**TL;DR:** Just use `type: 'svgUploadPreview'` on a field in your schema

**NOTE** Don't forget to import into your `schema.js` file:
```js
import svgUploadPreview from 'sanity-plugin-inline-svg';
```
![](https://media.giphy.com/media/iF0wlg8tIsftlFwYNi/giphy.gif)

**Long version:** In your schema definitions (think `schemas/clientList.js`):

```js
export default {
  name: 'clientList',
  title: 'My Past Clients',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'svgUpload',
      title: 'Upload SVG File',
      type: 'svgUploadPreview',
    }
  ]
}
```


**Within Array:**

![](https://media.giphy.com/media/Lq0d4kcJcldbpnrhH2/giphy.gif)

1. Create an object schema something like `schemas/svgUploadArray.js`
```js
import SvgPreviewComponent from './svgPreviewComponent';

export default {
  type: 'object',
  name: 'svgUpload',
  title: 'Client Image Upload',
  fields: [
    {
      type: '',
      name: 'source',
      title: 'Client SVG Logo',
    },
  ],
  preview: {
    select: {
      svgHtml: 'source',
    },
    component: SvgPreviewComponent,
  },
};
```

2. Create a preview component for the array items `schemas/svgPreviewComponent.js`
```js
import React from 'react';

function SvgPreviewComponent({ value }) {
  if (!value) {
    return <pre>Please upload an svg image</pre>;
  }
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: value.svgHtml }} />
    </>
  );
}

export default SvgPreviewComponent;
```

3. In your schema definitions (think `schemas/clientList.js`):
```js
export default {
  name: 'clientList',
  title: 'My Past Clients',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'clientLogos',
      type: 'array',
      title: 'Client Logos',
      description: 'Client Logo Upload',
      options: {
        layout: 'grid',
      },
      of: [
        {
          title: 'Client Logos',
          type: 'svgUpload',
        },
      ],
    }
  ]
}
```

## TODO
- [ ] Allow styles to override
- [x] Move `Upload SVG` CTA to react component from css
- [x] ~Clean up some syntax~ sanitized svg on upload

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