Update octicons to v19.5.0 (#13738)

NOTICE.md

@@ -41,7 +41,7 @@ Crystal playground includes the following libraries, which have their own licens
 
    * [jQuery][] - [MIT][]
      `Copyright JS Foundation and other contributors, https://js.foundation/`
-   * [Octicons][] - [MIT][] (for codes) or [OFL-1.1][] (for fonts) `(c) 2012-2016 GitHub, Inc.`
+   * [Octicons][] - [MIT][] `(c) 2023 GitHub Inc.`
    * [Materialize][] - [MIT][] `Copyright (c) 2014-2015 Materialize`
    * [CodeMirror][] - [MIT][] `Copyright (C) 2016 by Marijn Haverbeke <[email protected]> and others`
    * [ansi\_up][] - [MIT][] `Copyright (c) 2011 Dru Nelson`

src/compiler/crystal/tools/playground/public/application.css

@@ -183,11 +183,6 @@ h4 {
 .code-btn .icon { margin-right: 3px; }
 .code-btn .icon :before { font-size:14px;}
 
-.run-button {
-  padding-top: 5px;
-  padding-left: 2px;
-}
-
 .run-button-preloader {
   position: absolute;
   top: 11px;

src/compiler/crystal/tools/playground/public/application.js

@@ -84,8 +84,7 @@ $(function(){
               .attr("href", msg.html_url)
               .attr("target", "_blank")
               .append($("<span>").text(msg.html_url))
-              .append(" ")
-              .append($("<span>").addClass("octicon octicon-link-external"))
+              .append(` <svg viewBox="0 0 16 16" class="octicon"><use xlink:href="/vendor/octicons-19.5.0/octicons.svg#link-external-16"></use></svg>`)
             )).openModal();
       }
     });
@@ -132,7 +131,9 @@ function initDemoPlayground(dom) {
             output = $("<code>").addClass("output").css("min-height", "1.5em")
           )))
       ).append(
-      outputIndicator = $("<div>").addClass("col s1")
+        `<div class="col s1"><svg viewBox="0 0 16 16" class="octicon"><use xlink:href="/vendor/octicons-19.5.0/octicons.svg#terminal-16"></use></svg></div>`
+      ).append(
+      outputIndicator = $("<div>")
       ).append(
         $("<div>").addClass("col s4").append(buttonsContainer = $("<div>").addClass("demoButtonsContainer"))
       ));

src/compiler/crystal/tools/playground/public/session.js

@@ -60,7 +60,7 @@ Playground.RunButtons = function(options) {
     return $("<a>").addClass("run-button btn-floating btn-large waves-effect waves-light tooltipped")
       .attr("href", "#")
       .attr("data-position", "left").attr("data-delay", "50").attr("data-tooltip", tooltip)
-      .append($("<span>").addClass("mega-octicon " + octicon));
+      .append(`<svg viewBox="0 0 16 16" class="mega-octicon"><use xlink:href="/vendor/octicons-19.5.0/octicons.svg#${octicon}-16"></use></svg>`);
   }
 
   var buildProgress = function() {
@@ -81,8 +81,8 @@ Playground.RunButtons = function(options) {
   var mac = /Mac/.test(navigator.platform);
 
   options.container
-    .prepend(this.stopButton = buildAnchor("Stops code", "octicon-primitive-square"))
-    .prepend(this.playButton = buildAnchor(mac ? "⌘ + Enter" : "Ctrl + Enter", "octicon-triangle-right"))
+    .prepend(this.stopButton = buildAnchor("Stops code", "square-fill"))
+    .prepend(this.playButton = buildAnchor(mac ? "⌘ + Enter" : "Ctrl + Enter", "triangle-right"))
     .prepend(this.progress = buildProgress());
 
   this.stopButton.hide().tooltip();
@@ -130,8 +130,6 @@ Playground.OutputIndicator = function(dom) {
   this.dom = dom;
   this.blinkTimeout = null;
 
-  this.dom.addClass("octicon octicon-terminal");
-
   this.turnOnWithBlink = function () {
     this.dom.removeClass('teal-text red-text');
     this.blinkTimeout = window.setTimeout(function(){
@@ -632,11 +630,6 @@ Playground.Session = function(options) {
       run();
     });
 
-    var iconCont = btn.getElementsByClassName('icon')[0];
-    if (iconCont) {
-      iconCont.classList.add('octicon', 'octicon-checklist');
-    }
-
     function run() {
       if (isRunning) {
         return console.info('code formatter is already running. Attempt aborted...');

src/compiler/crystal/tools/playground/public/vendor/octicons-19.5.0/octicons.css

@@ -0,0 +1,22 @@
+/*
+
+.octicon is optimized for 16px.
+.mega-octicon is optimized for larger sizes.
+
+*/
+.octicon, .mega-octicon {
+  display: inline-block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+.mega-octicon {
+  width: 50px;
+  height: 50px;
+  vertical-align: middle;
+}