{"id":4253,"date":"2024-10-15T13:53:30","date_gmt":"2024-10-15T12:53:30","guid":{"rendered":"https:\/\/www.itersdesktop.com\/?p=4253"},"modified":"2024-10-15T14:43:23","modified_gmt":"2024-10-15T13:43:23","slug":"how-to-use-svg-in-react","status":"publish","type":"post","link":"https:\/\/www.itersdesktop.com\/vi\/2024\/10\/15\/how-to-use-svg-in-react\/","title":{"rendered":"How to use SVG in React"},"content":{"rendered":"<p><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a466dec84746\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a466dec84746\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/10\/15\/how-to-use-svg-in-react\/#introduction\" >Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/10\/15\/how-to-use-svg-in-react\/#a-real-case\" >A Real Case<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/10\/15\/how-to-use-svg-in-react\/#references\" >References<\/a><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>In React, we often use SVG for icons or images. How do we use it efficiently? How do we add a number in the centre of a trolley icon? We will figure our how to achieve those things in a minute.<\/p>\n<h1><span class=\"ez-toc-section\" id=\"a-real-case\"><\/span>A Real Case<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>The shopping cart icon is rendered at the top right of the menu bar where it shows the items buyers have added in. The piece of HTML codes below will render the trolley cart and 10 in the middle of the trolley which is an example of the quantity added by buyers.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h1 class='cart'&gt;\r\n  &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 256 256\" id=\"IconChangeColor\"\r\n       height=\"68\" width=\"68\"&gt;\r\n     &lt;rect width=\"156\" height=\"156\" fill=\"none\"&gt;&lt;\/rect&gt;\r\n     &lt;circle cx=\"80\" cy=\"216\" r=\"12\"&gt;&lt;\/circle&gt;\r\n     &lt;circle cx=\"184\" cy=\"216\" r=\"12\"&gt;&lt;\/circle&gt;\r\n     &lt;path\r\n       d=\"M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8\"\r\n       fill=\"none\" stroke=\"#faf9f9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n       stroke-width=\"2\" id=\"mainIconPathAttribute\"&gt;&lt;\/path&gt;\r\n     &lt;text text-anchor=\"middle\" x=\"50%\" y=\"50%\" dy=\".35em\" font-family=\"sans-serif\" font-size=\"90px\" fill=\"white\"&gt;10&lt;\/text&gt;\r\n  &lt;\/svg&gt;\r\n&lt;\/h1&gt;<\/pre>\n<p>Thanks to the question <a href=\"https:\/\/stackoverflow.com\/questions\/30970618\/generating-number-circles-in-svg-how-to-centre-the-text\" target=\"_blank\" rel=\"noopener\">here<\/a>, we found another example using SVG and inserting a number inside it. In practice, the number is automatically rendered depending on how many quantities buyers add to their shopping cart.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h1&gt;\r\n&lt;svg width='128' height='64' viewBox='0 0 128 128' xmlns='http:\/\/www.w3.org\/2000\/svg' version='1.1' &gt;\r\n  &lt;circle cx=\"64\" cy=\"64\" r=\"62\" fill=\"rgb(0,100,0)\" stroke=\"red\" stroke-width=\"2\"\/&gt;\r\n  &lt;text text-anchor=\"middle\" x=\"50%\" y=\"50%\" dy=\".35em\" font-family=\"sans-serif\" font-size=\"90px\" fill=\"white\"&gt;20&lt;\/text&gt;\r\n&lt;\/svg&gt;\r\n&lt;\/h1&gt;<\/pre>\n<p>Hopefully, this helps your life.<\/p>\n<h1><span class=\"ez-toc-section\" id=\"references\"><\/span>References<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>[1] https:\/\/www.telerik.com\/blogs\/how-to-use-svg-react, accessed on 13 Oct 2024<\/p>\n<p>[2] https:\/\/www.freecodecamp.org\/news\/how-to-use-svg-icons-in-react-with-react-icons-and-font-awesome\/, accessed on 13 Oct 2024<\/p>","protected":false},"excerpt":{"rendered":"<p>Introduction In React, we often use SVG for icons or images. How do we use it efficiently? How do we add a number in the centre of a trolley icon?&hellip; <\/p>\n","protected":false},"author":2,"featured_media":4257,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225],"tags":[828],"class_list":["post-4253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-react"],"_links":{"self":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts\/4253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/comments?post=4253"}],"version-history":[{"count":5,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts\/4253\/revisions"}],"predecessor-version":[{"id":4263,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts\/4253\/revisions\/4263"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/media\/4257"}],"wp:attachment":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/media?parent=4253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/categories?post=4253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/tags?post=4253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}