From ebd2a7034fbdb10ad3966c3fed245d0db837cf5f Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Sun, 10 Apr 2016 01:55:36 -0400
Subject: [PATCH] Use an SVG sprite for the p5 logo.

---
 css/style.css            | 7 ++++++-
 lib/toolbar.tsx          | 4 +++-
 static/img/p5js-beta.svg | 9 ++++++---
 typings/react.d.ts       | 1 +
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index ab96f8a..990d26c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -56,8 +56,13 @@ a.p5-logo {
   justify-content: center;
 }
 
-a.p5-logo img {
+a.p5-logo svg {
   height: 25px;
+  width: 55px;
+}
+
+a.p5-logo svg use {
+  fill: $darkPink;
 }
 
 .media-play, .media-stop {
diff --git a/lib/toolbar.tsx b/lib/toolbar.tsx
index 60f9556..06c0506 100644
--- a/lib/toolbar.tsx
+++ b/lib/toolbar.tsx
@@ -27,7 +27,9 @@ export default class Toolbar extends React.Component<Props, State> {
     return (
       <div className="toolbar">
         <a className="p5-logo" href="http://p5js.org/" target="_blank">
-          <img src="static/img/p5js-beta.svg" alt="p5js.org"/>
+          <svg>
+            <use xlinkHref="static/img/p5js-beta.svg#p5js-beta"/>
+          </svg>
         </a>
         <button onClick={this.props.onPlayClick}>
           <OpenIconicMediaPlay/>
diff --git a/static/img/p5js-beta.svg b/static/img/p5js-beta.svg
index 379eae7..20ded18 100644
--- a/static/img/p5js-beta.svg
+++ b/static/img/p5js-beta.svg
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-   width="250px" height="114px" viewBox="0 0 250 114" enable-background="new 0 0 250 114" xml:space="preserve">
-<path fill="#EC245E" d="M16.254,27.631v7.998h0.359c0.715-1.113,1.65-2.248,2.805-3.402c1.155-1.154,2.568-2.188,4.24-3.105
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+  <symbol id="p5js-beta" viewBox="0 0 250 114">
+  <path d="M16.254,27.631v7.998h0.359c0.715-1.113,1.65-2.248,2.805-3.402c1.155-1.154,2.568-2.188,4.24-3.105
   c1.67-0.912,3.561-1.67,5.67-2.268c2.107-0.596,4.477-0.896,7.104-0.896c4.059,0,7.799,0.777,11.223,2.328
   c3.422,1.555,6.367,3.684,8.836,6.389c2.465,2.707,4.375,5.891,5.73,9.551c1.352,3.662,2.029,7.602,2.029,11.82
   s-0.656,8.179-1.971,11.879c-1.312,3.701-3.184,6.925-5.611,9.67c-2.427,2.746-5.371,4.938-8.834,6.566
@@ -51,4 +52,6 @@
   h2.969v0.969h-2.969v1.827h3.299v1.022h-4.447V6.842z M144.088,7.846h-1.982V6.842h5.117v1.004h-1.982v5.463h-1.152V7.846
   L144.088,7.846z M149.449,6.842h0.996l2.787,6.467h-1.316l-0.602-1.479h-2.807l-0.584,1.479h-1.289L149.449,6.842z M150.912,10.843
   l-0.996-2.631l-1.014,2.631H150.912z"/>
+</symbol>
+</defs>
 </svg>
diff --git a/typings/react.d.ts b/typings/react.d.ts
index 0493955..514b935 100644
--- a/typings/react.d.ts
+++ b/typings/react.d.ts
@@ -2465,5 +2465,6 @@ declare namespace JSX {
         stop: React.SVGProps;
         text: React.SVGProps;
         tspan: React.SVGProps;
+        use: React.SVGProps;
     }
 }