A simple react component that renders svg playing cards by Adrian Kennard. Cards downloaded from https://www.me.uk/cards/ and distributed under CC0 license.
svg2react used to create React components
This package is similar to heruka-urgyen/react-playing-cards. I discovered this package after I had rolled my own.
Used this tutorial by Rupert 'fildon' McKay to create npm package
Differences are
- We have Joker cards
- For now Only one set of cards instead of four
- We name cars Suit first rather than Rank first. ie S2 rather than 2s for 2 of spades. Makes it possible to have Two cahracter React component names matching the card names
- The SVGs are react components
Got zipfile from here
unzip to a folder make sure svg-to-react npm package is globally installed
# run svgtoreact. flip the two letter card names
for i in ??.svg;do orig=`echo $i|sed "s/.svg//"`; new=`echo $orig|rev`; svgtoreact $orig $new ;done
# rename .js to .tsx
for i in ??.js;do j=`echo $i|sed "s/.js//"`; mv $i $j.tsx;done
# Fix types
sed -i '' 's/(props)/(props: any)/g' *.tsx
# Generate map entries for cardsMap.ts
for i in ??.tsx;do j=`echo $i|sed -e "s/.tsx//"`;echo $j: c.$j,;done
# Make index.tsx for importing cards
for i in ??.tsx;do j=`echo $i|sed -e "s/.tsx//"`;echo "export {default as $j} from './$j'";done > index.tsx