Add steer icon

Author: martenrichter

src/ui/blackboard/jupyterhublet.jsx

@@ -22,11 +22,11 @@ import { Tooltip } from 'primereact/tooltip'
 import {
   faMaximize,
   faArrowsAlt,
-  faTachometerAlt,
   faCamera,
   faChevronLeft,
   faChevronRight
 } from '@fortawesome/free-solid-svg-icons'
+import { fiSteer } from '../icons/icons.jsx'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { JupyterEdit } from '@fails-components/jupyter-react-edit'
 import { OverlayPanel } from 'primereact/overlaypanel'
@@ -48,10 +48,11 @@ export class AppletButton extends Component {
   }
 
   render() {
-    const icon = typeof this.props.icon !== 'string' && this.props.icon
+    let icon = typeof this.props.icon !== 'string' && this.props.icon
     const style = {}
     let iconclassname
     if (typeof this.props.icon === 'string') iconclassname = this.props.icon
+    if (typeof this.props.icon === 'function') icon = icon()
     if (this.props.hide) style.visibility = 'hidden'
     return (
       <button
@@ -1149,7 +1150,7 @@ export class JupyterHublet extends Component {
             )}
             {!master && this.props.makeAppletMaster && (
               <AppletButton
-                icon={<FontAwesomeIcon icon={faTachometerAlt} />}
+                icon={fiSteer}
                 key='controlbutton'
                 onClick={() => {
                   this.props.makeAppletMaster()

src/ui/icons/README

@@ -44,6 +44,7 @@ and this one is made by Marten Richter and is subject to AGPL 3.0
 
 notes
 screenCast
+steerIcon
 
 Furthermore, the
 

src/ui/icons/icons.jsx

@@ -1823,6 +1823,15 @@ const notesIcon = (
   </React.Fragment>
 )
 
+const steerIcon = (
+  <React.Fragment>
+    <path
+      d='m102.06 16.488a10.71 10.71 0 0 0-10.709 10.709v9.5547c3.2527-0.53555 6.5872-0.82422 9.9883-0.82422 4.1458 0 8.1947 0.42208 12.113 1.2109v-9.9414a10.71 10.71 0 0 0-10.709-10.709h-0.6836zm-51.564 19.904a10.71 10.71 0 0 0-7.5723 3.1367l-0.48242 0.48242a10.71 10.71 0 0 0 0 15.145l7.9062 7.9062c4.2048-6.1408 9.451-11.485 15.482-15.771l-7.7617-7.7617a10.71 10.71 0 0 0-7.5723-3.1367zm103.02 0a10.71 10.71 0 0 0-7.5606 3.1367l-8.3281 8.3281c6.0479 4.4403 11.234 9.9897 15.371 16.311l0.09961-0.035157c-0.06714-0.097259-0.1237-0.20197-0.19141-0.29883l8.6777-8.6777a10.71 10.71 0 0 0-0.01563-15.16l-0.48437-0.48242a10.71 10.71 0 0 0-7.5684-3.1211zm-52.18 2.2812c-32.791-2e-6 -59.367 27.027-59.367 60.43 1e-6 33.403 26.576 60.43 59.367 60.43 32.791 0 59.367-27.027 59.367-60.43 0-33.403-26.576-60.43-59.367-60.43zm0.26953 15.85c24.56 0.063639 44.438 19.897 44.367 44.283-0.07109 24.386-20.065 44.118-44.625 44.055-24.56-0.06364-44.44-19.899-44.369-44.285 0.071086-24.386 20.067-44.116 44.627-44.053zm-0.00586 1.9434c-3.5347-0.009159-6.9668 0.41679-10.252 1.2129v15.133l-10.852-10.852c-6.5381 3.6841-11.992 9.0327-15.781 15.473l15.273 15.273h-20.631c-0.27495 1.9204-0.42973 3.8781-0.43555 5.873-0.016757 5.7483 1.1295 11.229 3.209 16.229h8.5469l-5.6719 5.6719c3.876 6.3793 9.4066 11.656 16.004 15.25l10.338-10.338v14.314c3.2084 0.77577 6.5565 1.202 10.006 1.2109 4.2022 0.01089 8.2594-0.59272 12.096-1.707v-13.043l9.166 9.166c6.5193-3.7108 11.952-9.0827 15.715-15.539l-4.9863-4.9863h7.4668c2.0551-4.9341 3.2042-10.337 3.2207-16.008 0.00604-2.0698-0.14396-4.103-0.42773-6.0938h-19.57l14.604-14.604c-3.6706-6.5147-9.0284-11.962-15.494-15.762l-9.6934 9.6934v-13.867c-3.7607-1.0901-7.7331-1.6905-11.85-1.7012zm61.506 36.236c0.20932 2.1075 0.34375 4.237 0.34375 6.4004 0 5.4256-0.697 10.683-1.9648 15.709h0.36914c3.7e-4 -0.00139 0.00158-0.00252 0.00195-0.00391h14.289a10.71 10.71 0 0 0 10.709-10.709v-0.68359a10.71 10.71 0 0 0-10.709-10.709h-12.482c-1.3e-4 -0.001291 1.3e-4 -0.002615 0-0.003906h-0.55664zm-134.46 0.003906a10.71 10.71 0 0 0-10.709 10.709v0.68359a10.71 10.71 0 0 0 10.709 10.709h12.51c-1.2647-5.022-1.9375-10.285-1.9375-15.705 0-2.1589 0.10813-4.2929 0.31641-6.3965h-10.889zm128.83 33.426c-0.02174 0.04668-0.03867 0.09599-0.06055 0.14258 0.02159-0.04286 0.03907-0.08793 0.06055-0.13086v-0.01172zm-4.5957 8.2129c-4.1132 6.209-9.2893 11.624-15.252 16.002l9.1035 9.1035a10.71 10.71 0 0 0 15.145 0l0.48242-0.48242a10.71 10.71 0 0 0 0-15.145l-9.4785-9.4785zm-102.54 0.79688-8.6816 8.6816a10.71 10.71 0 0 0 0 15.145l0.48242 0.48242a10.71 10.71 0 0 0 15.145 0l8.5371-8.5371c-6.0318-4.2861-11.278-9.6305-15.482-15.771zm63.105 25.924c-3.9186 0.78881-7.9674 1.2109-12.113 1.2109-3.4011 0-6.7355-0.28869-9.9883-0.82422v13.24a10.71 10.71 0 0 0 10.709 10.709h0.6836a10.71 10.71 0 0 0 10.709-10.709v-13.627z'
+      fill='currentColor'
+    />
+  </React.Fragment>
+)
+
 export const fiScreenCast = iconMakerInl(screenCastIcon, 'Screencast', {
   size: '20px'
 })
@@ -1831,6 +1840,10 @@ export const fiNotes = iconMakerInl(notesIcon, 'Notes', {
   size: '20px'
 })
 
+export const fiSteer = iconMakerInl(steerIcon, 'Notes', {
+  size: '17px'
+})
+
 // the FAILS logo is not covered by AGPL 3.0
 
 const failsIcon = (