dls-graphics

Shared graphic resources for Baidu Light DLS.

Installation

npm i --save-dev dls-graphics

Usage

JavaScript

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:

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:

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

Hero

• blank (blank.svg)

  

• clientError (client-error.svg)

  

• forbidden (forbidden.svg)

  

• noResults (no-results.svg)

  

• notFound (not-found.svg)

  

• reviewError (review-error.svg)

  

• reviewPending (review-pending.svg)

  

• reviewSuccess (review-success.svg)

  

• serverError (server-error.svg)

  

Spot

• spotBarChart (spot-bar-chart.svg)

  

• spotCleared (spot-cleared.svg)

  

• spotFunnelChart (spot-funnel-chart.svg)

  

• spotGaugeChart (spot-gauge-chart.svg)

  

• spotImageError (spot-image-error.svg)

  

• spotLineChart (spot-line-chart.svg)

  

• spotLoadError (spot-load-error.svg)

  

• spotMap (spot-map.svg)

  

• spotNetworkError (spot-network-error.svg)

  

• spotNoAccess (spot-no-access.svg)

  

• spotNoContent (spot-no-content.svg)

  

• spotNoFavorites (spot-no-favorites.svg)

  

• spotNoHistory (spot-no-history.svg)

  

• spotNoImage (spot-no-image.svg)

  

• spotNoInternet (spot-no-internet.svg)

  

• spotNoMessages (spot-no-messages.svg)

  

• spotNoResults (spot-no-results.svg)

  

• spotNoStore (spot-no-store.svg)

  

• spotNoVideo (spot-no-video.svg)

  

• spotPieChart (spot-pie-chart.svg)

  

• spotPresentation (spot-presentation.svg)

  

• spotRadarChart (spot-radar-chart.svg)

  

• spotRelationshipChart (spot-relationship-chart.svg)

  

• spotServerError (spot-server-error.svg)

  

• spotTryLater (spot-try-later.svg)

  

• spotVideoError (spot-video-error.svg)

  

• spotWordCloud (spot-word-cloud.svg)

  

Misc

• imagePlaceholder (image-placeholder.svg)

  

• loading (loading.svg)

  

Deprecated

• partialBlankBrush (partial-blank-brush.svg)

  

• partialBlank (partial-blank.svg)

  

• partialError (partial-error.svg)

  

• partialForbidden (partial-forbidden.svg)

  

• underReview (under-review.svg)