@central-design-system/illustrations v3.0.0-beta.40

Central Design System - Illustrations

Иллюстрации

Getting started

NPM

npm install @central-design-system/illustrations
OR 
yarn add @central-design-system/illustrations

Use

To use Illustrations in your Vue.js project, add this code:

import Vue from 'vue';
import Illustrations from '@central-design-system/illustrations';

Vue.use(Illustrations);
import "@central-design-system/illustrations/styles.scss";

In your template

<template>
  <actives-rise-rub />
</template>

Properties

mono

Type: Boolean Required: false

SVG without main colors

Customize styles

Use common css class .cds-illustrations or other for customize colors and sizes

.cds-illustrations {
  width: 128px;
  height: 128px;
}

.cds-illustrations #color-primary {
  fill: red;
}

.cds-illustrations #color-secondary {
  fill: blue;
}

.cds-illustrations #shape {
  fill: green;
}

.cds-illustrations #mono {
  fill: yellow;
}

Build illustrations

Put svg file to the src/svg and run command

npm run generate

New vue component appear in src/components folder

Use for production build

npm run build