<p align="center">
    <a href="https://evomark.co.uk" target="_blank" alt="Link to evoMark's website">
        <picture>
          <source media="(prefers-color-scheme: dark)" srcset="https://evomark.co.uk/wp-content/uploads/static/evomark-logo--dark.svg">
          <source media="(prefers-color-scheme: light)" srcset="https://evomark.co.uk/wp-content/uploads/static/evomark-logo--light.svg">
          <img alt="evoMark company logo" src="https://evomark.co.uk/wp-content/uploads/static/evomark-logo--light.svg" width="500">
        </picture>
    </a>
</p>

<p align="center">
  <img src="https://img.shields.io/npm/dm/undraw-svg.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/undraw-svg"><img src="https://img.shields.io/npm/v/undraw-svg.svg" alt="Version"></a>
  <a href="https://github.com/evo-mark/undraw-svg/blob/main/LICENCE"><img src="https://img.shields.io/github/license/evo-mark/undraw-svg?style=flat" alt="Licence"></a>
</p>

# Undraw SVG

This package compiles all of the illustrations from the [undraw.co](https://undraw.co/illustrations) website as well as an informational JSON file.

All illustrations by [Katerina Limpitsouni](https://twitter.com/ninalimpi)

## Installation

```sh
pnpm add undraw-svg
```

--- OR ---

```sh
npm i undraw-svg
```

--- OR ---

```sh
yarn add undraw-svg
```

## Usage

While you can use the SVGs directly as images, this gives you no way to affect the theme colour, so it's recommended to import the SVG raw and use that in your components.

The below example assumes you're using Vite as your bundler.

```js
import WorkFriends from "undraw-svg/work-friends.svg?raw";

// Vue
<div v-html="WorkFriends"></div>;
```
