search

krazkidd / lineup

Softball lineup editor made with Nuxt 3 (Vue.js 3)
https://lineup.app.xericode.net
GNU Affero General Public License v3.0
3 stars 2 forks source link

Emoji react icons should use `<svg>` rather than `<img>` #9

Open krazkidd opened 1 year ago

krazkidd commented 1 year ago

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 commented 1 year ago

I can work on this one

krazkidd commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Thanks for taking a look, @fjuren!