# dls-graphics

> Graphics materials for Baidu Light DLS.

Latest version **1.4.3** (published 2023-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install dls-graphics
pnpm add dls-graphics
yarn add dls-graphics
bun add dls-graphics
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.3 |
| Published | 2023-09-06 |
| First published | 2020-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 603.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Justineo |
| Maintainers | ecomfe-core |
| Keywords | graphics, baidu, dls |

## Links

- npm: https://www.npmjs.com/package/dls-graphics
- Repository: https://github.com/ecomfe/dls-illustrations
- Homepage: https://github.com/ecomfe/dls-illustrations/tree/master/packages/dls-graphics/#readme
- Issues: https://github.com/ecomfe/dls-illustrations/issues
- npm.io page: https://npm.io/package/dls-graphics

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.4.3 (latest) — 2023-09-06
- 1.4.2 — 2023-09-01
- 1.4.1 — 2023-09-01
- 1.4.0 — 2023-08-11
- 1.3.3 — 2023-07-05
- 1.3.2 — 2022-07-19
- 1.3.1 — 2022-07-19
- 1.3.0 — 2022-07-04
- 1.3.0-beta.0 — 2022-06-23
- 1.2.0 — 2022-04-26
- 1.1.2 — 2022-03-18
- 1.1.1 — 2022-01-06
- 1.1.0 — 2022-01-04
- 1.0.0 — 2021-12-01
- 1.0.0-alpha.3 — 2021-04-08
- … 7 more at https://npm.io/package/dls-graphics/versions

## README

# dls-graphics

Shared graphic resources for Baidu Light DLS.

## Installation

```sh
npm i --save-dev dls-graphics
```

## Usage

### JavaScript

```js
import { loading } from 'dls-graphics'

console.log(loading)
/*
{
  contents: '<g style="transform-origin:50% 50%;animation:spin-359eb...',
  attrs: {
    width: '40',
    height: '40',
    class: 'dls-loading',
    viewBox: '0 0 64 64'
  }
}
*/
```

For example, to use it in a React component:

```js
import { loading } from 'dls-graphics'

export function IconLoading() {
  return (
    <svg
      {...loading.attrs}
      dangerouslySetInnerHTML={{ __html: loading.contents }}
    />
  )
}
```

#### Separate

To get `<style>` contents extracted outside SVG data, you can use:

```js
import { loading, loadingCss } from 'dls-graphics/dist/separate'

console.log(loading)
console.log(loadingCss)
/*
{
  contents: '<g style="transform-origin:50% 50%;animation:spin-359eb...',
  attrs: {
    width: '40',
    height: '40',
    class: 'dls-loading',
    viewBox: '0 0 64 64'
  }
}

@keyframes spin-359eb{0%{transform:rotate(0deg)}to{transform...
*/
```

### SVG assets

All graphics are also distributed as SVG files. You can acquire these minified SVG source to use properly. eg. import and render into your HTML file with webpack's `HtmlWebpackPlugin`, or use with some custom SVG loader to convert them directly into components.

#### Standalone

Standalone SVGs resides at `dls-graphics/dist`.

#### Separate

If you want to use SVGs with `<style>` contents extracted into separate CSS files, you can look into `dls-graphics/dist/separate`.

### List of available graphs

<!-- assets:start -->

#### Hero

* **`blank`** (blank.svg)

  ![blank](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/blank.svg)

* **`clientError`** (client-error.svg)

  ![clientError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/client-error.svg)

* **`forbidden`** (forbidden.svg)

  ![forbidden](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/forbidden.svg)

* **`noResults`** (no-results.svg)

  ![noResults](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/no-results.svg)

* **`notFound`** (not-found.svg)

  ![notFound](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/not-found.svg)

* **`reviewError`** (review-error.svg)

  ![reviewError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/review-error.svg)

* **`reviewPending`** (review-pending.svg)

  ![reviewPending](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/review-pending.svg)

* **`reviewSuccess`** (review-success.svg)

  ![reviewSuccess](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/review-success.svg)

* **`serverError`** (server-error.svg)

  ![serverError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/hero/server-error.svg)

#### Spot

* **`spotBarChart`** (spot-bar-chart.svg)

  ![spotBarChart](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-bar-chart.svg)

* **`spotCleared`** (spot-cleared.svg)

  ![spotCleared](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-cleared.svg)

* **`spotFunnelChart`** (spot-funnel-chart.svg)

  ![spotFunnelChart](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-funnel-chart.svg)

* **`spotGaugeChart`** (spot-gauge-chart.svg)

  ![spotGaugeChart](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-gauge-chart.svg)

* **`spotImageError`** (spot-image-error.svg)

  ![spotImageError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-image-error.svg)

* **`spotLineChart`** (spot-line-chart.svg)

  ![spotLineChart](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-line-chart.svg)

* **`spotLoadError`** (spot-load-error.svg)

  ![spotLoadError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-load-error.svg)

* **`spotMap`** (spot-map.svg)

  ![spotMap](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-map.svg)

* **`spotNetworkError`** (spot-network-error.svg)

  ![spotNetworkError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-network-error.svg)

* **`spotNoAccess`** (spot-no-access.svg)

  ![spotNoAccess](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-access.svg)

* **`spotNoContent`** (spot-no-content.svg)

  ![spotNoContent](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-content.svg)

* **`spotNoFavorites`** (spot-no-favorites.svg)

  ![spotNoFavorites](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-favorites.svg)

* **`spotNoHistory`** (spot-no-history.svg)

  ![spotNoHistory](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-history.svg)

* **`spotNoImage`** (spot-no-image.svg)

  ![spotNoImage](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-image.svg)

* **`spotNoInternet`** (spot-no-internet.svg)

  ![spotNoInternet](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-internet.svg)

* **`spotNoMessages`** (spot-no-messages.svg)

  ![spotNoMessages](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-messages.svg)

* **`spotNoResults`** (spot-no-results.svg)

  ![spotNoResults](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-results.svg)

* **`spotNoStore`** (spot-no-store.svg)

  ![spotNoStore](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-store.svg)

* **`spotNoVideo`** (spot-no-video.svg)

  ![spotNoVideo](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-no-video.svg)

* **`spotPieChart`** (spot-pie-chart.svg)

  ![spotPieChart](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-pie-chart.svg)

* **`spotPresentation`** (spot-presentation.svg)

  ![spotPresentation](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-presentation.svg)

* **`spotRadarChart`** (spot-radar-chart.svg)

  ![spotRadarChart](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-radar-chart.svg)

* **`spotRelationshipChart`** (spot-relationship-chart.svg)

  ![spotRelationshipChart](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-relationship-chart.svg)

* **`spotServerError`** (spot-server-error.svg)

  ![spotServerError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-server-error.svg)

* **`spotTryLater`** (spot-try-later.svg)

  ![spotTryLater](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-try-later.svg)

* **`spotVideoError`** (spot-video-error.svg)

  ![spotVideoError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-video-error.svg)

* **`spotWordCloud`** (spot-word-cloud.svg)

  ![spotWordCloud](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/spot/spot-word-cloud.svg)

#### Misc

* **`imagePlaceholder`** (image-placeholder.svg)

  ![imagePlaceholder](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/misc/image-placeholder.svg)

* **`loading`** (loading.svg)

  ![loading](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/misc/loading.svg)

#### Deprecated

* **`partialBlankBrush`** (partial-blank-brush.svg)

  ![partialBlankBrush](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/deprecated/partial-blank-brush.svg)

* **`partialBlank`** (partial-blank.svg)

  ![partialBlank](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/deprecated/partial-blank.svg)

* **`partialError`** (partial-error.svg)

  ![partialError](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/deprecated/partial-error.svg)

* **`partialForbidden`** (partial-forbidden.svg)

  ![partialForbidden](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/deprecated/partial-forbidden.svg)

* **`underReview`** (under-review.svg)

  ![underReview](https://raw.githubusercontent.com/ecomfe/dls-illustrations/master/raw/deprecated/under-review.svg)


<!-- assets:end -->

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