Emoji react icons should use <svg> rather than <img>

[krazkidd]

See ScoreboardEmojiButton component. This should use an element to source the image like we do in the LineupJerseyButton component.

The motivation for this is to be able to manipulate the images in real time, like say with filters or enhanced animations, though I'm not sure what can be done that CSS doesn't support in some way.

[fjuren]

I can work on this one

[krazkidd]

You were quick to respond! Please give it a shot. Here is the HTML to start. You will want to use the :href binding but I couldn't get the dimensions working to actually show the image. Shouldn't take long.

<svg viewBox="0 0 100 100" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
    <use x="0" y="0" width="40" height="40" :href="`/lineup/images/fluentui-emoji/${props.id}_color.svg`" />
</svg>

I need to update the README but you can start the dev environment with this:

npm install -g firebase-tools
firebase emulators:start
npm run dev

Thank you.

[fjuren]

Thanks for the info above. I can't seem to figure out why it's not showing the image, sorry about that.. it might be best to unassign me so someone else can give it a go. Good luck!

[krazkidd]

Thanks for taking a look, @fjuren!