analytics/webcontent/bi/js/admin/ba-graphics

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

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 "Set Me Up" in the top right corner and follow the instructions (Remeber our scope is @ba-ui-toolkit)

Building ba-graphics

• Load the dependencies:

  
  * Run build task:
  
  

  gulp build```

• Running the demo server

  
  ### 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';

...

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';

...

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';

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

```

Packaging

The ba-graphics are automatically built and deployed to npm (link) 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