# ba-graphics  [![Build Status](https://travis.ibm.com/BusinessAnalytics/ba-graphics.svg?token=9V5uknfXhubJ8tRKCHvW&branch=master)](https://travis.ibm.com/BusinessAnalytics/ba-graphics)

This graphic set is a collection of icons and illustrations based on the base IBM Design Language Icons found here: [IBM Design Language](http://www.ibm.com/design/language/)

It is merged with the Business Analytics Design Icons. If the same icon exists in both packages then the BA one overrides the standard icon/illustration.


## Websites

 * Icons: https://pages.github.ibm.com/BusinessAnalytics/ba-graphics/#/icon/
 * Illustrations: https://pages.github.ibm.com/BusinessAnalytics/ba-graphics/#/illustration/


## Designer Workflow

Contributing icons to ba-graphics: https://github.ibm.com/BusinessAnalytics/ba-ui-toolkit/wiki/Contributing-icons

## Developer Workflow

### Setting up Artifactory NPM

Before you can access any of the modules from the `@ba-ui-toolkit`, you need to configure your system with NPM.  

* Visit: https://na.artifactory.swg-devops.com/artifactory/webapp/#/artifacts/browse/tree/General/hyc-ba-npm-virtual
* Click <b>"Set Me Up"</b> in the top right corner and follow the instructions (Remeber our scope is @ba-ui-toolkit)


### Building ba-graphics


* Load the dependencies:

	```npm install```

* Run build task:

	```gulp build```

* Running the demo server

  ```npm run dev```

### Consuming ba-graphics


***IMPORTANT*** ba-graphics are NOT provided globally by the glass!

The ba-graphics repository is treated as an SVG store, where icons must be copied into an application or component and handled via webpack, js-icons or gulp/grunt build (and SVG sprites) before they can be accessed.


Add the following package to your project's package.json:
```
npm install --save @ba-ui-toolkit/ba-graphics
```
run `npm install`

* Note you may need the following lines in your .npmrc for npm to find all modules:
```
@ba-ui-toolkit:registry=https://na.artifactory.swg-devops.com/artifactory/api/npm/hyc-ba-npm-virtual/
```


#### How to use in project

##### RECOMMENDED WAY: icons-js (Without webpack loader)


If you do not want to rely on a webpack svg loader you can consume the icon-js files instead. These files have been bundled as stand alone js files that can be used directly in your project with no extra webpack loaders.


Using ba-ui-toolkit SVGIcon:

```
import SVGIcon from '@ba-ui-toolkit/svgicon';

import arrowLeft from '@ba-ui-toolkit/ba-graphics/dist/icons-js/arrow_left_16.js';

...

<SVGIcon iconId={arrowLeft.id} />


```

Using standard html:

```
import arrowLeft from '@ba-ui-toolkit/ba-graphics/dist/icons-js/arrow_left_16';

const rendered = `
<svg viewBox="${arrowLeft.viewBox}">
  <use xlink:href="#${arrowLeft.id}" />
</svg>`;
```

##### Using webpack loader (Not Recommended)

Install svg-sprite-loader
```
npm install --save-dev svg-sprite-loader
```

Add the following webpack loader

```
const svgLoader = {
	test: /\.svg$/,
	use: [
		{
		  loader: 'svg-sprite-loader',
		},
	 ],
};
```

In your project you can consumer the icon in few ways:

Using ba-ui-toolkit SVGIcon:

```
import SVGIcon from '@ba-ui-toolkit/svgicon';

import arrowLeft from '@ba-ui-toolkit/ba-graphics/dist/icons/arrow_left_16.svg';

...

<SVGIcon iconId={arrowLeft.id} />


```

Using standard html:

```
import arrowLeft from '@ba-ui-toolkit/ba-graphics/dist/icons/arrow_left_16.svg';

const rendered = `
<svg viewBox="${arrowLeft.viewBox}">
  <use xlink:href="#${arrowLeft.id}" />
</svg>`;
```


### Illustrations

Illustrations work the same way as icons except for the need for css to set the proper colors of the illustrations.

Use the essentials scss OR pre-compiled css to grab graphics colors

```
import '@ba-ui-toolkit/essentials/graphics/graphics.scss';

OR

import '@ba-ui-toolkit/ba-graphics/dist/css/graphics.css';
```

Using SVGIcon simply add themable prop:

```
import emAddContent from '@ba-ui-toolkit/ba-graphics/dist/illustrations-js/em-add-content_256.js';

<SVGIcon themable intent={'primary'} iconId={emAddContent.id} height="256" width="256"/>
```

For `<svg>` add 'ba-graphics-themable' to `<use>` class name

```
<svg viewBox="${emAddContent.viewBox}">
  <use class="ba-graphics-themable" xlink:href="#${emAddContent.id}" />
</svg>
```


### Packaging

The ba-graphics are automatically built and deployed to npm ([link](https://na.artifactory.swg-devops.com/artifactory/webapp/#/artifacts/browse/tree/General/hyc-ba-npm-local/@ba-ui-toolkit/ba-graphics)) as a patch.

If the change is breaking (icon renaming, refactoring, consumption upgrades, etc.) the publih should be done manually and the Major or Minor version number bumped as to not break consumers downstream