React Icons

by rdenver6

HTML

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">
<div class="ms-Grid" dir="ltr">
  <h1 class="ms-font-su">Render Office Fabric UI Icons into Canvas</h1>
  <p>This is a simple tool to render an icon from the <a class="ms-fontColor-blueLight" href="https://developer.microsoft.com/en-us/fabric#/styles/icons">Office Fabric UI icon font</a> into an HTML <code>&lt;canvas&gt;</code> with a background color. Right-click and save the image to use it.</p>
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm12 ms-lg6">
      <h2 class="ms-font-xxl">Icon/Canvas Specifications</h2>
      <form id="form">
        <div class="ms-Grid">
          <div class="ms-Grid-row">
            <div class="ms-Grid-col ms-md6">
              <label for="font-class">Icon name</label>
              <input type="text" name="fontClass" id="font-class" placeholder="e.g. ms-Icon ms-Icon-Warning" value="Contact">
            </div>
            <div class="ms-Grid-col ms-md6">
              <label for="font-size">Font size (px)</label>
              <input type="number" step="1" min="1" name="fontSize" id="font-size" placeholder="e.g. 60" value="56">
            </div>
          </div>
          <div class="ms-Grid-row">
            <div class="ms-Grid-col ms-md6">
              <label for="image-width">Image width (px)</label>
              <input type="number" step="1" min="0" name="imageWidth" id="image-width" placeholder="e.g. 80" value="92">
            </div>
            <div class="ms-Grid-col ms-md6">
              <label for="image-height">Image height (px)</label>
              <input type="number" step="1" min="0" name="imageHeight" id="image-height" placeholder="e.g. 80" value="92">
            </div>
          </div>
          <div class="ms-Grid-row">
            <div class="ms-Grid-col ms-md6">
              <label...

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;font-weight:600;
}
.ms-Grid {
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1280px;
}
.ms-Grid-row {
  margin-left: -16px;
  margin-right: -16px;
}
.ms-Grid-col {
  padding: 0 16px;
}
label {
  display: block;
  margin-bottom: 0.5em;
}
input {
  border: none;
  display: block;
  margin-bottom: 2em;
  padding: 5px;
  width: 100%;
}
input[type="checkbox"] {
  display: inline-block;
  padding: 0;
  width: auto;
}
input[type="button"],
input[type="submit"],
.ms-button {
  cursor: pointer;
  display: inline-block;
  padding: 0.75em 2em;
  text-decoration: none;
  width: auto;
  
  .ms-Icon {
    transform: translateY(2px);
  }
}
.canvas-container {
  background-color: white;
  display: inline-block;
  margin-bottom: 1em;
  padding: 10px;
  width: auto;
}
#canvas {
  color: black;
  font-family: FabricMDL2Icons;
  font-weight:bold;
}

Babel + JSX

const form = document.getElementById("form");
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const download = document.getElementById("download-link");
const dataURL = document.getElementById("dataURL");

function getFontIconCharacter(className, pseudo = ':before') {
  var testI = document.createElement('i');
  var char;

  testI.className = `ms-Icon ms-Icon--${className}`;
  document.body.appendChild(testI);

  char = window.getComputedStyle(testI, pseudo).getPropertyValue('content').replace(/'|"/g, '');

  testI.remove();
  return char;
}

function drawCircle() {
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = canvas.width / 2;
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = document.getElementById("bg-color").value || "#777777";
  context.fill();
}

function drawRect() {
  context.fillStyle = document.getElementById("bg-color").value || "#777777";
  context.fillRect(0, 0, canvas.width, canvas.height);
}

function drawIcon() {
  canvas.width = parseInt(document.getElementById("image-width").value, 10) || 92;
  canvas.height = parseInt(document.getElementById("image-height").value, 10) || 92;
  context.clearRect(0, 0, canvas.width, canvas.height);
  if (document.getElementById("shape").checked) {
    drawCircle();
  } else {
    drawRect();
  }  
  context.fillStyle = document.getElementById("icon-color").value || "#FFFFFF";
  let fontClass = document.getElementById("font-class").value,
      fontSize = document.getElementById("font-size").value || 280,
      topOffset = document.getElementById("top-offset").value || 210,
      leftOffset = document.getElementById("left-offset").value || 210;
  context.font = fontSize + "px FabricMDL2Icons";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillText(getFontIconCharacter(fontClass), parseInt(leftOffset, 10), parseInt(topOffset, 10));
 ...