Skip to content
This repository has been archived by the owner on Feb 1, 2024. It is now read-only.
/ ui-visuals Public archive

🎡 Illustrations used in the Teamleader application(s), both as SVG and matching React-based implementation.

License

Notifications You must be signed in to change notification settings

teamleadercrm/ui-visuals

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Warning

This package is deprecated. The content is moved to the @teamleader/ahoy package. The further development of the project will be closed-source but the package will be published under the new name.

Teamleader UI Illustrations

Illustrations used in the Teamleader application(s), both as SVG and matching React-based implementation.

Installation

Teamleader's illustrations package is available on npm.

$ npm install --save @teamleader/ui-illustrations

or

$ yarn install @teamleader/ui-illustrations

If you're already using teamleader-ui in your application, you can access the illustrations using the sub-repo notation '@teamleader-ui/illustrations'.

Usage

import React from 'react';
import { render } from 'react-dom';
import { IllustrationEmptyStateMeetings120x120Static } from '@teamleader/ui-illustrations';

const App = () => {
  return (
    <IllustrationEmptyStateMeetings120x120Static />
  );
}

render(<App />, document.querySelector('#app'));

Development

Prerequisites

  • node ^12.0.0
  • npm ^6.9.0

Getting started

Clone this repo

$ git clone https://github.com/teamleadercrm/ui-illustrations.git

Add your newly designed SVG files to the /illustrations folder. Make sure they are named properly using the dimensions_name_variant.svg syntax, eg: 120x120_empty_state_meeting_static.svg or 240x240_task_list_dynamic.svg.

Don't forget to transform your newly added SVGs to React components by running

$ npm run build

If you are satisfied with your updates, make sure to bump the version number in the package.json file and publish it for others to use by running

$ npm publish --access=public

About

🎡 Illustrations used in the Teamleader application(s), both as SVG and matching React-based implementation.

Resources

License

Stars

Watchers

Forks

Packages

No packages published