{"post":{"id":"5fd6b7a727af25739589250d","_id":"5fd6b7a727af25739589250d","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607907201367/T4U0hLW_2.png","__typename":"PostCoverImage"},"slug":"how-to-use-svgs-as-tags-in-react","readTime":5,"replyCount":1,"responseCount":2,"brief":"This article covers how to allow SVGs to be utilized as imported (tagged) components in your React app, which can be used and styled in congruence with imported icon packages.\nReact Icons is a robust icon library that includes hundreds (if not thousa...","subtitle":null,"isFeatured":false,"contributors":[{"_id":"5f666c8c35d6463d2b5f875e","name":"Brenda Michelle","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1600547981391/Ked5itKw-.jpeg","username":"BrendaMichellle","__typename":"User"},{"_id":"5f92dd6465ec1a6c2163b504","name":"Rahul Singh","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1616646073467/wK-zHctA1.png","username":"rahuladream","__typename":"User"}],"bookmarked":false,"views":628,"url":"https://joojaco.hashnode.dev/how-to-use-svgs-as-tags-in-react","totalReactions":47,"title":"How to Use SVGs as Tags in React","dateAdded":"2020-12-14T00:53:59.196Z","cuid":"ckinuge5b07m0txs15nvvcaca","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","seo":{"title":null,"description":null,"__typename":"SEO"},"ogMetaData":{"image":null,"__typename":"OpenGraphMetaData"},"author":{"_id":"5f5975149890d7397f16150c","name":"Sarah Shook","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1599698197346/592Wpi46p.jpeg","isPro":false,"username":"shookcodes","__typename":"User","tagline":"Freelance software developer"},"coAuthors":[],"series":null,"tags":[{"_id":"56744723958ef13879b95469","logo":"https://res.cloudinary.com/hashnode/image/upload/v1500325020/kp4vjytdfuqbhaibiqm7.png","name":"SVG","slug":"svg","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"56744723958ef13879b95289","logo":null,"name":"icon","slug":"icon","__typename":"Tag"}],"publication":{"_id":"5f59756d9890d7397f161511","url":"https://joojaco.hashnode.dev","canonicalURL":"https://joojaco.hashnode.dev","title":"","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":null,"metaTags":"","isTeam":false,"domainInfo":{"hashnodeSubdomain":"joojaco","domain":{"host":"blog.shook.codes","ready":false,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"5fd73d9bae523508b1da693b","author":{"_id":"5f666c8c35d6463d2b5f875e","name":"Brenda Michelle","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1600547981391/Ked5itKw-.jpeg","isPro":false,"username":"BrendaMichellle","__typename":"User"},"content":{"html":"

Great Post! thank you Sarah :)

\n","markdown":"Great Post! thank you Sarah :)","text":"Great Post! thank you Sarah :)\n","__typename":"Content"},"dateAdded":"2020-12-14T10:25:31.030Z","stamp":"ckioevdsk00ugpts1bz0y4q4c","totalReactions":1,"__typename":"Comment","replies":{"edges":[{"node":{"id":"5fd83e117418a90e83c89bd6","author":{"_id":"5f5975149890d7397f16150c","name":"Sarah Shook","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1599698197346/592Wpi46p.jpeg","isPro":false,"username":"shookcodes","__typename":"User"},"content":{"html":"

Thank you, Brenda!

\n","markdown":"Thank you, Brenda!","text":"Thank you, Brenda!\n","__typename":"Content"},"dateAdded":"2020-12-15T04:39:45.687Z","stamp":"ckiphyl9102yyv7s16vap4mqb","totalReactions":0,"__typename":"Reply"},"__typename":"CommentReplyEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"CommentReplyConnection"}},"__typename":"PostCommentEdge"},{"node":{"id":"5fd72e40ae523508b1da680b","author":{"_id":"5f92dd6465ec1a6c2163b504","name":"Rahul Singh","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1616646073467/wK-zHctA1.png","isPro":false,"username":"rahuladream","__typename":"User"},"content":{"html":"

Love this, Thank you 💫️ Sarah Shook

I would love to hear your review on 12 Recommended Advice For Learning Programming Faster

\n","markdown":"Love this, Thank you 💫️ [Sarah Shook](@shookcodes)\n\nI would love to hear your review on [12 Recommended Advice For Learning Programming Faster](https://blog.voltry.in/12-recommended-advice-for-learning-programming-faster)","text":"Love this, Thank you 💫️ Sarah Shook\nI would love to hear your review on 12 Recommended Advice For Learning Programming Faster\n","__typename":"Content"},"dateAdded":"2020-12-14T09:20:00.587Z","stamp":"ckiocj51l00cypts16onm5fnp","totalReactions":0,"__typename":"Comment","replies":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"CommentReplyConnection"}},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"Mg==","__typename":"PageInfo"},"__typename":"PostCommentConnection"},"commenters":{"edges":[{"node":{"_id":"5f666c8c35d6463d2b5f875e","name":"Brenda Michelle","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1600547981391/Ked5itKw-.jpeg","isPro":false,"username":"BrendaMichellle","__typename":"User"},"__typename":"PostCommenterEdge"},{"node":{"_id":"5f92dd6465ec1a6c2163b504","name":"Rahul Singh","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1616646073467/wK-zHctA1.png","isPro":false,"username":"rahuladream","__typename":"User"},"__typename":"PostCommenterEdge"}],"__typename":"PostCommenterConnection"}}}

How to Use SVGs as Tags in React

3 comments