Use an SVG for the tile bag (rather than an emoji that looks like a purse)

This SVG is creative commmons (public domain dedication) made available
through the Open Clipart Library. We originally found it here:

	https://commons.wikimedia.org/wiki/File:Mcol_money_bag.svg

And edited it to remove the dollar sign.

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index 5dd14e94a82087ad9cbe7097a8e04a46d833abb3..22e27ba50bfea4f89e8f0f664d367d52069b80d9 100644 (file)
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -48,7 +48,7 @@
 }
 
 .bag .bag-icon {
-  font-size: 2em;
+  display: block;
 }
 
 .bag .bag-count {

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index b90ca21ab6575081fa5eec17ba7cad2915774fc8..52036c0d71dce3200a05f6863ffb7f0a673ed1dd 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -712,7 +712,15 @@ class Game extends React.Component {
         <span className={"bag" + (state.bag_remaining === 0 || !!state.claim_player ? " disabled" : "")}
               onClick={state.bag_remaining > 0 && !state.claim_player
                 ? () => this.deal_letter() : null}>
-          <span className="bag-icon">&#x1F45C;</span>
+          <svg className="bag-icon" viewBox="0 0 56 66" width="36" height="42">
+            <g transform="translate(-.17 -178.12) scale(.859)">
+              <path fill="#c17d11" d="M64.895 253.679c0 16.697-13.34 29.038-30.77 29.038-17.43 0-33.76-13.694-31.577-30.248 2.016-15.286 14.004-30.96 31.434-30.818 17.573.143 30.711 15.158 30.913 32.028z"/>
+              <path fill="#c17d11" fillRule="evenodd" stroke="#000" d="M28.5 220.594c-1.5-2.25-9-9.75-9-9.75l13.75 1-3 3.5 2.5 1.25 9.25-3 4.25 1 6.25-2-6.75 8-4.25 2-13-2z"/>
+              <path fill="#8f5902" fillRule="evenodd" d="m22.25 210.594 8.75-2.75 1.75 2.25 10.471-1.691-2.221 2.941.75.896 7.5-3.146 3.75.25 1 2-2 2.25-5.75 1.25-3.75-1.25-10 3.25-2.25-1.25 3.5-3.75-11.5-1z"/>
+              <path fill="#edd400" fillRule="evenodd" stroke="#000" strokeWidth=".6" d="M25.698 223.011c.265-.354 2.321-2.131 2.321-2.131l13.877 1.724 12.993-4.066 3.536.663-.663 2.077-12.551 1.37-4.287 1.989-15.226-1.626z"/>
+              <path fillRule="evenodd" d="M44.632 209.139c-.75.834-1.775 1.362-2.822 1.724.495.633 1.297.05 1.882-.116 2.06-.771 3.977-2.094 6.237-2.19 1.02-.058 2.05-.084 3.068-.025 1.478.441 2.3 2.418 1.432 3.733-.579.461-1.151.916-1.473 1.58-.557.286-1.044.66-1.243 1.266-.594.241-1.126.526-1.405 1.137-1.074 1.362-2.581 2.338-3.514 3.818-.025.52.87.016 1.124-.138.619-.464 1.356-.761 2.136-.704.669-.178 1.228-.643 1.928-.74 1.766-.415 3.594-.662 5.41-.549.878.102 1.95.222 2.454 1.054.376.57.105 1.36-.478 1.668-.534.357-1.224.453-1.656.961-.32.342-.757.636-1.25.544-.717.044-1.304.571-2.032.581-2.65.334-5.34-.297-7.974.242-.319.098-1.203-.569-1.05.048.418.423 1.12.443 1.467.955.476.48 1.08.66 1.694.815.672.386 1.252.91 1.897 1.337 2.46 1.802 4.84 3.773 6.709 6.202 4.78 4.594 6.3 7.997 6.577 12.685.334.503.563 1.058.472 1.658.162.631.681 1.122.722 1.796.303 1.747.007 3.53.257 5.282.207 2.07.274 4.172-.108 6.228-.194.971-.253 1.984-.626 2.91-.272.619-.788 1.129-.851 1.833-.135.872-.14 1.796-.602 2.58-.75 1.468-2.039 2.629-2.549 4.224-1.069.462-1.738 1.476-2.678 2.125-4.432 3.743-9.425 6.965-15.005 8.681-5.546 1.747-11.555 1.736-17.181.365-5.426-1.305-10.534-3.692-15.324-6.516-1.152-.561-1.595-1.976-2.805-2.46-1.663-2.286-3.842-4.25-4.932-6.91-.4-.625-.238-1.567-.94-1.997-1.31-5.596-1.823-8.498-1.026-13.199-.059-.759.007-1.529.408-2.191.367-.956.6-1.963.69-2.983.688-.577 1.032-1.473 1.097-2.352.7-.367.83-1.214 1.097-1.881.011-.464-.153-1.422.53-1.408.722.132 1.038-.825 1.297-1.347.337-.489.968-.73 1.11-1.376.224-.606.796-.9 1.243-1.305.539-.65.782-1.491 1.342-2.13.673-.823 1.462-1.559 1.993-2.492.28-.461.887-.474 1.177-.934.378-.42.736-.888 1.259-1.138.531-.412.572-1.204 1.157-1.572 1.134-.846 2.237-1.737 3.414-2.525 2.212-1.518 4.697-3.273 7.4-3.548 2.97-.336 6.016-.437 8.973-.188 1.89.198 3.715.723 5.62.611.679-.142 3.973-1.583 4.68-1.533.857-.072.026 2.42.511 1.613-1.107-.148-3.877.729-4.94.865-.657-.39-1.376.691-2.054.547-4.114.213-8.832-2.83-12.381-1.197-.804-.517.086-3.123-.505-3.855-.549-.724-1.106-1.46-1.826-2.022-.718-.063-.825-.886-1.174-1.366-.958-1.44-2.443-2.415-3.462-3.804-.113-.663.078-1.381.512-1.895.795-.165 1.602-.272 2.386-.491 3.173-.755 6.31-1.811 9.59-1.983.693.212.69 1.262 1.452 1.358.787 0 1.531-.312 2.29-.484 2.222-.682 4.507-1.576 6.874-1.254 1.007.153 1.964.77 2.295 1.77zm-11.916 1.568c-.52-.49-1.17-.809-1.724-1.254-2.557.197-4.965 1.243-7.526 1.41-.218.591-1.403.215-1.331.947 3.634.264 7.202-.996 10.836-.625.86.113 1.728.38 2.411.933.193.892-.006 1.928.617 2.683.677.154 1.176-.529 1.827-.604.664-.275 1.352-.819 1.342-1.606.18-1.193 1.266-1.925 2.23-2.485.252-.192 1.042-.531.857-.804-3.224.128-6.334 1.12-9.54 1.405zm18.344-.784c-1.083.042-2.175.096-3.234.347-.567.587-1.441.537-2.187.554-.688.192-1.229.754-1.959.822-.68.197-1.373.357-2.028.629-.586-.053-1.778-.162-1.606.757.386.452 1.026.005 1.477-.131.509-.19 1.083-.46 1.626-.29.597.383.761 1.293 1.523 1.436 1.293.143 2.459-.645 3.742-.6.586-.006 1.193-.126 1.647-.52.618-.396 1.354-.505 2.053-.665.596-.209 1.213-.607 1.431-1.222.035-.738-.792-1.143-1.436-1.117-.35-.025-.7-.008-1.05-.001zM27.1 212.49c-1.324.094-2.726-.531-3.985.11-.453.493.616.811.803 1.243.615.632 1.268 1.263 2.084 1.627-.103.78.867.926 1.257 1.418 1.183 1.172 2.029 2.763 3.595 3.488.64.279 1.357.362 2.047.268-1.557-1.228-2.487-3.04-3.92-4.39-.172-.834-.884-1.604-.59-2.496.235-.703 1.084-.914 1.374-1.58-.898.01-1.77.267-2.665.313zm3.136 2.195c1.367.592 2.899.324 4.3.012.636-.228-.082-.886.079-1.365-.128-.79-1.149-.29-1.677-.288-1.064.229-1.957.871-2.702 1.641zm10.505-.47c-.123.584-.806.581-1.278.632-.557.083-.915.587-1.418.807-1.7.914-3.649 1.178-5.537 1.43-.306.091-1.198-.03-.607.393.849.883 2 1.578 2.402 2.797-.04.612.354 1.3 1.042 1.057 2.905.199 5.917.338 8.709-.644.572-.366.925-.974 1.432-1.415 1.556-1.631 3.132-3.243 4.661-4.9-2.417.448-4.958.863-7.369.156-1.2.791-1.308 2.354-2.017 3.494-.481.456-.667 1.081-.925 1.631-.53.543-1.308.033-.875-.627.258-.865.897-1.537 1.334-2.304.09-.703.544-1.187.929-1.724.116-.343.423-1-.216-.784-.089.01-.18.016-.268.001zm7.996 6.271c1.607.523 3.269-.053 4.86-.342.91-.202 1.791-.421 2.696-.639.31-.071 1.262-.5.773-.745-2.593.017-5.29.157-7.663 1.305-.232.124-.456.263-.666.421zm4.547 9.407c.059-.514-.445-.767-.788-.89-.314-.64-.925-1.008-1.574-1.221-.661-.417-.901-1.343-1.718-1.54-.63-.242-1.199-.617-1.77-.963-.688-.218-1.175-.755-1.595-1.312-.402-.612-1.275-.889-1.833-.304-.464.424-1.04.68-1.66.77-1.785.327-3.609.115-5.404-.004-1.533-.14-3.074-.193-4.603-.37-1.974-.264-3.922-.803-5.709-1.692-.537.418-1.072.87-1.725 1.097-1.023 1.322-2.559 2.17-3.449 3.606-.729.054-1.161.833-1.822 1.032-1.731 1.709-3.227 3.65-5.076 5.24-.151.917-1.131 1.294-1.58 2.034-1.03 1.39-1.908 2.89-2.988 4.246-.964 1.26-2.042 2.446-2.855 3.811.04.492.665.913.164 1.421-.379.792-.95 1.47-1.521 2.128-.101 1.37-.849.947-1.083 3.91-.482 4.773-1.535 7.528 1.14 13.977.483.486.751 1.127 1.045 1.737.243.656.85 1.015 1.393 1.339.167.568.45 1.146 1.132 1.073.688.281.586 1.156.861 1.729.361.628 1.125.806 1.681 1.208.947.541 1.801 1.229 2.731 1.793.785.406 1.702.633 2.31 1.315.831.724 1.995.79 2.918 1.349.42.635 1.276.31 1.878.568.767.779 1.888.969 2.891 1.28 1.663.433 3.38.6 5.091.706.915.789 2.207.656 3.328.608.657-.205 1.163.351 1.766.34.944.042 1.888.002 2.82-.152.916-.134 1.845-.229 2.77-.137 1.033-.063 1.926-.889 2.994-.661 2.213.01 4.074-1.458 6.234-1.723.621-.743 1.578-1.097 2.509-1.254.744-.818 1.815-1.188 2.77-1.689.374-.649.861-1.232 1.482-1.655.812-.677 1.688-1.327 2.243-2.247.052-.545.744-.719.77-1.298.243-.661.531-1.356 1.142-1.76.458-.502.348-1.272.794-1.785.438-.411.528-.883.58-1.443.409-.362.608-.815.699-1.381.161-.781.467-1.515.746-2.258.385-1.062.447-2.196.642-3.298.339-2.563-.064-5.14-.29-7.694-.06-1.033-.23-2.057-.544-3.045-3.644-6.99 2.661-1.62-5.805-12.478-.461-.449-.989-.904-1.152-1.555-.899-.945-2.044-1.604-2.979-2.509z"/>
+            </g>
+          </svg>
           <span className="bag-count">
             {state.bag_remaining !== null ? state.bag_remaining : "?"}
           </span>