Merge pull request #99 from thewtex/icon-package

Icon package

.changeset/eighty-terms-grab.md

@@ -0,0 +1,5 @@
+---
+'@itk-viewer/icons': patch
+---
+
+Add @itk-viewer/icons package.

packages/icons/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/icons/README.md

@@ -0,0 +1,177 @@
+# @itk-viewer/icons
+
+Icons for `itk-viewer` user interfaces.
+
+## 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>

packages/icons/README.md.in

@@ -0,0 +1,27 @@
+# @itk-viewer/icons
+
+Icons for `itk-viewer` user interfaces.
+
+## 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
+

packages/icons/build.mjs

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import glob from 'glob';
+import svgToMiniDataURI from 'mini-svg-data-uri';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+try {
+  fs.mkdirSync('dist');
+} catch (err) {
+  if (err.code !== 'EEXIST') throw err;
+}
+
+const svgFiles = glob.sync(path.join('src', '*.svg'));
+const icons = new Map();
+svgFiles.forEach((svgFile) => {
+  const contents = fs.readFileSync(svgFile, { encoding: 'utf8', flag: 'r' });
+  const optimizedSVGDataURI = svgToMiniDataURI(contents);
+  const moduleContents = `const optimizedSVGDataUri = "${optimizedSVGDataURI}"
+
+export default optimizedSVGDataUri
+`;
+  const basename = path.basename(svgFile, '.svg');
+  icons.set(`${basename}IconDataUri`, {
+    modulePath: `./${basename}.svg.uri.js`,
+    svgFile,
+  });
+  fs.writeFileSync(path.join('dist', `${basename}.svg.uri.js`), moduleContents);
+});
+
+const indexFile = path.join('dist', 'index.js');
+const indexFD = fs.openSync(indexFile, 'w');
+for (const [varName, { modulePath }] of icons) {
+  fs.writeSync(
+    indexFD,
+    `export { default as ${varName} } from "${modulePath}"\n`,
+  );
+}
+fs.closeSync(indexFD);
+
+const readmeContents = fs.readFileSync(path.join(__dirname, 'README.md.in'), {
+  encoding: 'utf8',
+  flag: 'r',
+});
+const readmeFD = fs.openSync(path.join(__dirname, 'README.md'), 'w');
+fs.writeSync(readmeFD, readmeContents);
+
+fs.writeSync(readmeFD, '<table>\n');
+for (const [varName, { svgFile }] of icons) {
+  fs.writeSync(readmeFD, '  <tr>\n');
+  fs.writeSync(readmeFD, `    <th>${varName}</th>\n`);
+  fs.writeSync(
+    readmeFD,
+    `    <th><img src="${svgFile}" width="40" alt="${varName}"/></th>\n`,
+  );
+  fs.writeSync(readmeFD, '  </tr>\n');
+}
+fs.writeSync(readmeFD, '</table>\n');

packages/icons/dist/crop.svg.uri.js

@@ -0,0 +1,3 @@
+const optimizedSVGDataUri = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384'%3e%3cpath d='M64 0h32v48H64zm32 288V112H64v208h208v-32zm240 0h48v32h-48z'/%3e%3cpath d='M0 64v32h288v288h32V64z'/%3e%3c/svg%3e"
+
+export default optimizedSVGDataUri

packages/icons/dist/gradient.svg.uri.js

@@ -0,0 +1,3 @@
+const optimizedSVGDataUri = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3e%3cpath d='M16 12h4v4h-4zm-4 4h4v4h-4zm8 0h4v4h-4zm4-4h4v4h-4zM8 12h4v4H8zM32 0H4C1.8 0 0 1.8 0 4v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zM12 30H8v-4h4v4zm8 0h-4v-4h4v4zm8 0h-4v-4h4v4zm4-14h-4v4h4v4h-4v-4h-4v4h-4v-4h-4v4h-4v-4H8v4H4v-4h4v-4H4V4h28v12z'/%3e%3c/svg%3e"
+
+export default optimizedSVGDataUri

packages/icons/dist/index.js

@@ -0,0 +1,37 @@
+export { default as annotationsIconDataUri } from "./annotations.svg.uri.js"
+export { default as axesIconDataUri } from "./axes.svg.uri.js"
+export { default as blendModeIconDataUri } from "./blendMode.svg.uri.js"
+export { default as boundingBoxIconDataUri } from "./boundingBox.svg.uri.js"
+export { default as cropIconDataUri } from "./crop.svg.uri.js"
+export { default as downloadIconDataUri } from "./download.svg.uri.js"
+export { default as fullscreenIconDataUri } from "./fullscreen.svg.uri.js"
+export { default as geometryIconDataUri } from "./geometry.svg.uri.js"
+export { default as gradientIconDataUri } from "./gradient.svg.uri.js"
+export { default as greenPlaneIconDataUri } from "./greenPlane.svg.uri.js"
+export { default as imageIconDataUri } from "./image.svg.uri.js"
+export { default as interpolationIconDataUri } from "./interpolation.svg.uri.js"
+export { default as invisibleIconDataUri } from "./invisible.svg.uri.js"
+export { default as labelsIconDataUri } from "./labels.svg.uri.js"
+export { default as lengthToolIconDataUri } from "./lengthTool.svg.uri.js"
+export { default as opacityIconDataUri } from "./opacity.svg.uri.js"
+export { default as pauseIconDataUri } from "./pause.svg.uri.js"
+export { default as playIconDataUri } from "./play.svg.uri.js"
+export { default as pointSetIconDataUri } from "./pointSet.svg.uri.js"
+export { default as redPlaneIconDataUri } from "./redPlane.svg.uri.js"
+export { default as removeIconDataUri } from "./remove.svg.uri.js"
+export { default as resetCameraIconDataUri } from "./resetCamera.svg.uri.js"
+export { default as resetCropIconDataUri } from "./resetCrop.svg.uri.js"
+export { default as resetImageIconDataUri } from "./resetImage.svg.uri.js"
+export { default as rotateIconDataUri } from "./rotate.svg.uri.js"
+export { default as sampleDistanceIconDataUri } from "./sampleDistance.svg.uri.js"
+export { default as scaleSelectIconDataUri } from "./scaleSelect.svg.uri.js"
+export { default as screenshotIconDataUri } from "./screenshot.svg.uri.js"
+export { default as selectColorIconDataUri } from "./selectColor.svg.uri.js"
+export { default as shadowIconDataUri } from "./shadow.svg.uri.js"
+export { default as toggleIconDataUri } from "./toggle.svg.uri.js"
+export { default as viewPlanesIconDataUri } from "./viewPlanes.svg.uri.js"
+export { default as visibleIconDataUri } from "./visible.svg.uri.js"
+export { default as volumeIconDataUri } from "./volume.svg.uri.js"
+export { default as volumeScatteringIconDataUri } from "./volumeScattering.svg.uri.js"
+export { default as windowingIconDataUri } from "./windowing.svg.uri.js"
+export { default as yellowPlaneIconDataUri } from "./yellowPlane.svg.uri.js"