itk-viewer-icons/README.md

UI icons for itk-viewer

# itk-viewer-icons

[![npm version](https://badge.fury.io/js/itk-viewer-icons.svg)](https://badge.fury.io/js/itk-viewer-icons)

Icons for `itk-viewer` user interfaces.

## DEPRECATED

**DEPRECATED**: Please use [@itk-viewer/icons](https://www.npmjs.com/package/@itk-viewer/icons) instead.

## Installation

```
npm install --save itk-viewer-icons
```

## Example Usage

```
import { axesIconDataUri } from 'itk-viewer-icons'

iconElement = document.createElement('div')
iconElement.innerHTML = `<img src="${axesIconDataUri}" alt="axes"/>`
```

## Icons Sources

Icons were created or collected from sources noted in their commit message.
Some icon sources can be found in the history of the viewer repository at
revision `f6b4fa13c8`, before they were extracted.

## Icon Renderings


<table>
  <tr>
    <th>annotationsIconDataUri</th>
    <th><img src="src/annotations.svg" width="40" alt="annotationsIconDataUri"/></th>
  </tr>
  <tr>
    <th>axesIconDataUri</th>
    <th><img src="src/axes.svg" width="40" alt="axesIconDataUri"/></th>
  </tr>
  <tr>
    <th>blendModeIconDataUri</th>
    <th><img src="src/blendMode.svg" width="40" alt="blendModeIconDataUri"/></th>
  </tr>
  <tr>
    <th>boundingBoxIconDataUri</th>
    <th><img src="src/boundingBox.svg" width="40" alt="boundingBoxIconDataUri"/></th>
  </tr>
  <tr>
    <th>cropIconDataUri</th>
    <th><img src="src/crop.svg" width="40" alt="cropIconDataUri"/></th>
  </tr>
  <tr>
    <th>downloadIconDataUri</th>
    <th><img src="src/download.svg" width="40" alt="downloadIconDataUri"/></th>
  </tr>
  <tr>
    <th>fullscreenIconDataUri</th>
    <th><img src="src/fullscreen.svg" width="40" alt="fullscreenIconDataUri"/></th>
  </tr>
  <tr>
    <th>geometryIconDataUri</th>
    <th><img src="src/geometry.svg" width="40" alt="geometryIconDataUri"/></th>
  </tr>
  <tr>
    <th>gradientIconDataUri</th>
    <th><img src="src/gradient.svg" width="40" alt="gradientIconDataUri"/></th>
  </tr>
  <tr>
    <th>greenPlaneIconDataUri</th>
    <th><img src="src/greenPlane.svg" width="40" alt="greenPlaneIconDataUri"/></th>
  </tr>
  <tr>
    <th>imageIconDataUri</th>
    <th><img src="src/image.svg" width="40" alt="imageIconDataUri"/></th>
  </tr>
  <tr>
    <th>interpolationIconDataUri</th>
    <th><img src="src/interpolation.svg" width="40" alt="interpolationIconDataUri"/></th>
  </tr>
  <tr>
    <th>invisibleIconDataUri</th>
    <th><img src="src/invisible.svg" width="40" alt="invisibleIconDataUri"/></th>
  </tr>
  <tr>
    <th>labelsIconDataUri</th>
    <th><img src="src/labels.svg" width="40" alt="labelsIconDataUri"/></th>
  </tr>
  <tr>
    <th>lengthToolIconDataUri</th>
    <th><img src="src/lengthTool.svg" width="40" alt="lengthToolIconDataUri"/></th>
  </tr>
  <tr>
    <th>opacityIconDataUri</th>
    <th><img src="src/opacity.svg" width="40" alt="opacityIconDataUri"/></th>
  </tr>
  <tr>
    <th>pauseIconDataUri</th>
    <th><img src="src/pause.svg" width="40" alt="pauseIconDataUri"/></th>
  </tr>
  <tr>
    <th>playIconDataUri</th>
    <th><img src="src/play.svg" width="40" alt="playIconDataUri"/></th>
  </tr>
  <tr>
    <th>pointSetIconDataUri</th>
    <th><img src="src/pointSet.svg" width="40" alt="pointSetIconDataUri"/></th>
  </tr>
  <tr>
    <th>redPlaneIconDataUri</th>
    <th><img src="src/redPlane.svg" width="40" alt="redPlaneIconDataUri"/></th>
  </tr>
  <tr>
    <th>removeIconDataUri</th>
    <th><img src="src/remove.svg" width="40" alt="removeIconDataUri"/></th>
  </tr>
  <tr>
    <th>resetCameraIconDataUri</th>
    <th><img src="src/resetCamera.svg" width="40" alt="resetCameraIconDataUri"/></th>
  </tr>
  <tr>
    <th>resetCropIconDataUri</th>
    <th><img src="src/resetCrop.svg" width="40" alt="resetCropIconDataUri"/></th>
  </tr>
  <tr>
    <th>resetImageIconDataUri</th>
    <th><img src="src/resetImage.svg" width="40" alt="resetImageIconDataUri"/></th>
  </tr>
  <tr>
    <th>rotateIconDataUri</th>
    <th><img src="src/rotate.svg" width="40" alt="rotateIconDataUri"/></th>
  </tr>
  <tr>
    <th>sampleDistanceIconDataUri</th>
    <th><img src="src/sampleDistance.svg" width="40" alt="sampleDistanceIconDataUri"/></th>
  </tr>
  <tr>
    <th>scaleSelectIconDataUri</th>
    <th><img src="src/scaleSelect.svg" width="40" alt="scaleSelectIconDataUri"/></th>
  </tr>
  <tr>
    <th>screenshotIconDataUri</th>
    <th><img src="src/screenshot.svg" width="40" alt="screenshotIconDataUri"/></th>
  </tr>
  <tr>
    <th>selectColorIconDataUri</th>
    <th><img src="src/selectColor.svg" width="40" alt="selectColorIconDataUri"/></th>
  </tr>
  <tr>
    <th>shadowIconDataUri</th>
    <th><img src="src/shadow.svg" width="40" alt="shadowIconDataUri"/></th>
  </tr>
  <tr>
    <th>toggleIconDataUri</th>
    <th><img src="src/toggle.svg" width="40" alt="toggleIconDataUri"/></th>
  </tr>
  <tr>
    <th>viewPlanesIconDataUri</th>
    <th><img src="src/viewPlanes.svg" width="40" alt="viewPlanesIconDataUri"/></th>
  </tr>
  <tr>
    <th>visibleIconDataUri</th>
    <th><img src="src/visible.svg" width="40" alt="visibleIconDataUri"/></th>
  </tr>
  <tr>
    <th>volumeIconDataUri</th>
    <th><img src="src/volume.svg" width="40" alt="volumeIconDataUri"/></th>
  </tr>
  <tr>
    <th>volumeScatteringIconDataUri</th>
    <th><img src="src/volumeScattering.svg" width="40" alt="volumeScatteringIconDataUri"/></th>
  </tr>
  <tr>
    <th>windowingIconDataUri</th>
    <th><img src="src/windowing.svg" width="40" alt="windowingIconDataUri"/></th>
  </tr>
  <tr>
    <th>yellowPlaneIconDataUri</th>
    <th><img src="src/yellowPlane.svg" width="40" alt="yellowPlaneIconDataUri"/></th>
  </tr>
</table>