I have used an SVG as a regular images inside a React component, as shown below:
import React from "react";
const FreeCourseMaterial = () => {
return (
<img
className="w-72 h-36"
src="./images/StockCover/stock-cover.svg"
alt="Stock Cover Formula"
></img>
);
};
export default FreeCourseMaterial;
The result looks like the following:
I am trying to adjust the size of the svg using Tailwind CSS classes (w-72 & h-36). But I am seeing no change in size. Am I doing this right?
What is the method I can use to control the size of the SVG? Let's say I want to double the size of the svg. How can I achieve this?
Please note that I have used Corel Draw to create the SVG.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2018 (64-Bit) -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="4in" height="2in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 2666.66 1333.33"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font id="FontID0" horiz-adv-x="722" font-variant="normal" style="fill-rule:nonzero" font-style="normal" font-weight="700">
<font-face
font-family="Arial">
<font-face-src>
<font-face-name name="Arial Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0 0z"/></missing-glyph>
<glyph unicode=" " horiz-adv-x="277" d=""/>
<glyph unicode="=" horiz-adv-x="584" d="M40.9912 397.011l0 127.004 501.007 0 0 -127.004 -501.007 0zm0 -217.016l0 127.004 501.007 0 0 -127.004 -501.007 0z"/>
<glyph unicode="A" horiz-adv-x="722" d="M717.993 0l-156.146 0 -61.8628 163.003 -287.149 0 -59.517 -163.003 -153.319 0 278.007 716.009 153.168 0 286.818 -716.009zm-264.985 283.991l-99.5158 265.015 -96.6587 -265.015 196.175 0z"/>
<glyph unicode="C" horiz-adv-x="722" d="M530.992 263.992l139.996 -43.0062c-21.473,-78.8247 -57.3216,-137.319 -107.335,-175.664 -49.9835,-38.1643 -113.32,-57.3216 -190.16,-57.3216 -95.155,0 -173.318,32.5103 -234.67,97.5008 -61.1711,64.9905 -91.8168,153.83 -91.8168,266.669 0,119.154 30.8261,211.843 92.3281,277.826 61.5019,66.0131 142.492,99.0045 242.82,99.0045 87.6665,0 158.852,-26.0143 213.527,-77.8322 32.6607,-30.6758 56.9908,-74.6744 73.3211,-132.176l-143.003 -33.9839c-8.51102,36.9914 -26.1646,66.3138 -52.9909,87.8169 -27.0067,21.5031 -59.6674,32.1795 -98.0121,32.1795 -53.1713,0 -96.3279,-19.0069 -129.319,-57.1712 -33.1719,-38.0139 -49.6827,-99.6662 -49.6827,-184.987 0,-90.3431 16.3303,-154.852 48.8406,-193.167 32.6607,-38.5252 75.0053,-57.6825 127.154,-57.6825 38.5252,0 71.667,12.1801 99.3354,36.6606 27.6683,24.5105 47.6677,62.8553 59.6674,115.335z"/>
<glyph unicode="H" horiz-adv-x="722" d="M72.9903 0l0 716.009 145.018 0 0 -282.007 281.976 0 0 282.007 145.018 0 0 -716.009 -145.018 0 0 313.013 -281.976 0 0 -313.013 -145.018 0z"/>
<glyph unicode="P" horiz-adv-x="666" d="M72.9903 0l0 716.009 231.843 0c87.847,0 144.988,-3.51869 171.664,-10.6764 40.9912,-10.8267 75.3361,-34.1644 103.004,-70.1633 27.6683,-35.9989 41.5025,-82.4938 41.5025,-139.515 0,-43.9987 -7.99976,-80.8096 -23.8489,-110.824 -15.9995,-29.9841 -36.1493,-53.5022 -60.6598,-70.6746 -24.4805,-16.992 -49.5023,-28.33 -74.8248,-33.8336 -34.4952,-6.82686 -84.3283,-10.3155 -149.68,-10.3155l-93.9821 0 0 -270.007 -145.018 0zm145.018 594.99l0 -203.994 78.8247 0c56.8404,0 94.6738,3.84951 113.831,11.338 19.1573,7.4885 34.1644,19.1573 44.9911,35.3373 10.8568,15.9995 16.3303,34.4952 16.3303,55.8179 0,26.1646 -7.63887,47.6677 -22.8264,64.6898 -15.3379,16.992 -34.4952,27.6683 -57.9832,31.999 -17.1724,3.1578 -51.6676,4.81189 -103.666,4.81189l-69.5017 0z"/>
<glyph unicode="S" horiz-adv-x="666" d="M35.0065 231.993l140.988 14.0146c8.51102,-47.1866 25.503,-81.6818 51.3368,-103.847 25.8338,-22.1647 60.6598,-33.1719 104.508,-33.1719 46.3144,0 81.3209,9.83429 104.839,29.5029 23.488,19.6686 35.3072,42.6754 35.3072,69.0205 0,16.992 -4.99233,31.3073 -14.8266,43.307 -9.83429,11.8493 -27.1571,22.1948 -51.818,30.8562 -16.8416,5.98478 -55.1863,16.3303 -115.185,31.3374 -77.1706,19.3077 -131.334,42.9762 -162.491,71.1558 -43.8182,39.4875 -65.6522,87.6665 -65.6522,144.507 0,36.4801 10.3155,70.8249 30.8261,102.644 20.661,31.8487 50.3143,56.0284 89.1703,72.6895 38.8259,16.6612 85.5012,24.9917 140.477,24.9917 89.5011,0 157.018,-19.819 202.189,-59.6674 45.3219,-39.8184 68.9904,-92.8393 71.3362,-159.334l-145.018 -4.99233c-6.16523,36.9914 -19.3378,63.4868 -39.4875,79.6668 -20.1798,16.1499 -50.4947,24.3301 -90.8544,24.3301 -41.6529,0 -74.3136,-8.66139 -97.8316,-26.0143 -15.1574,-11.1576 -22.8264,-25.9842 -22.8264,-44.6603 0,-16.992 7.15768,-31.4878 21.5031,-43.4874 18.1649,-15.5183 62.344,-31.5178 132.507,-48.179 70.1633,-16.5108 121.981,-33.8336 155.484,-51.4872 33.6832,-17.8341 59.9982,-42.0138 79.0051,-72.8399 19.0069,-30.8261 28.5104,-68.84 28.5104,-114.012 0,-40.9912 -11.338,-79.4863 -34.1644,-115.335 -22.8264,-35.8185 -55.0059,-62.4944 -96.6587,-79.8171 -41.683,-17.5032 -93.6814,-26.1646 -155.845,-26.1646 -90.4935,0 -159.995,20.8114 -208.505,62.6447 -48.5098,41.683 -77.321,102.523 -86.8245,182.34z"/>
<glyph unicode="a" horiz-adv-x="556" d="M174.01 358.997l-123.996 22.0144c13.9845,50.6451 38.1643,88.1477 72.3287,112.478 34.1644,24.3301 84.9899,36.5102 152.326,36.5102 61.1711,0 106.824,-7.15768 136.838,-21.6535 29.8337,-14.5259 51.006,-32.8411 63.156,-55.1863 12.1801,-22.3151 18.3453,-63.156 18.3453,-122.823l-2.01498 -159.995c0,-45.5024 2.16535,-79.1856 6.49605,-100.839 4.3307,-21.6535 12.5109,-44.8408 24.5105,-69.5017l-135.996 0c-3.48862,8.99221 -7.99976,22.3452 -13.1725,39.9988 -2.16535,8.18021 -3.81943,13.5034 -4.84196,15.9995 -23.3076,-23.0068 -48.3294,-40.1792 -74.9752,-51.6676 -26.6759,-11.4884 -55.0059,-17.3228 -85.1704,-17.3228 -53.1713,0 -95.1851,14.4958 -125.831,43.4874 -30.6758,28.8412 -46.0137,65.5018 -46.0137,109.831 0,29.1721 7.00731,55.3367 20.9918,78.3435 14.0146,22.8264 33.5028,40.5101 58.8554,52.6601 25.1421,12.1801 61.5019,22.8264 108.989,31.999 63.9981,11.9996 108.508,23.3376 133.169,33.6832l0 13.8342c0,26.6458 -6.49605,45.6528 -19.5182,57.1411 -13.1425,11.338 -37.8334,17.022 -73.9827,17.022 -24.5105,0 -43.5175,-4.84196 -57.1712,-14.6763 -13.8342,-9.65384 -24.8414,-26.8263 -33.3223,-51.3368zm183.994 -111.004c-17.5032,-5.83441 -45.352,-12.8116 -83.5163,-20.9918 -37.9838,-8.18021 -62.9755,-16.18 -74.6444,-23.8489 -17.8341,-12.8116 -26.8563,-28.8112 -26.8563,-48.3294 0,-19.3077 7.18775,-35.8185 21.5031,-49.8331 14.3454,-13.9845 32.5103,-20.9918 54.675,-20.9918 24.6609,0 48.3294,8.18021 70.8249,24.3301 16.5108,12.5109 27.518,27.518 32.6907,45.5024 3.48862,11.6688 5.32315,34.014 5.32315,66.8251l0 27.3375z"/>
<glyph unicode="c" horiz-adv-x="556" d="M524.014 365.012l-135.003 -23.9993c-4.51114,26.8263 -14.8567,46.976 -31.0066,60.6598 -16.18,13.5034 -36.9914,20.3302 -62.6748,20.3302 -34.1644,0 -61.5019,-11.8493 -81.8321,-35.4877 -20.3302,-23.6685 -30.4953,-63.1861 -30.4953,-118.673 0,-61.6824 10.3456,-105.17 31.0066,-130.673 20.661,-25.503 48.3294,-38.1643 83.005,-38.1643 25.9842,0 47.3068,7.4885 63.8176,22.3151 16.6612,14.8567 28.33,40.3597 35.1568,76.6894l135.003 -23.0068c-13.9845,-62.0132 -40.8108,-108.839 -80.4788,-140.507 -39.668,-31.6682 -92.8393,-47.4873 -159.694,-47.4873 -75.6368,0 -136.146,23.9993 -181.137,71.8174 -45.1716,47.9986 -67.6671,114.342 -67.6671,199.182 0,85.832 22.6459,152.507 67.8175,200.325 45.1716,47.8482 106.343,71.667 183.513,71.667 62.9755,0 113.17,-13.6537 150.492,-40.8409 37.1718,-27.1571 63.8176,-68.4791 80.178,-124.147z"/>
<glyph unicode="d" horiz-adv-x="610" d="M548.014 0l-127.004 0 0 76.1782c-21.1723,-29.6833 -46.3445,-51.8481 -75.1857,-66.8551 -28.8112,-14.8266 -57.9832,-22.3151 -87.3357,-22.3151 -59.8177,0 -110.974,23.9993 -153.65,72.1482 -42.495,48.179 -63.8477,115.185 -63.8477,201.347 0,87.9974 20.661,155.003 62.1635,200.836 41.5025,45.8332 93.8318,68.6596 157.168,68.6596 58.0133,0 108.358,-24.1797 150.672,-72.3287l0 258.338 137.018 0 0 -716.009zm-366.004 269.496c0,-55.4871 7.66894,-95.6663 22.8264,-120.508 22.1647,-35.9989 52.9909,-53.9833 92.6589,-53.9833 31.5178,0 58.3441,13.5034 80.3284,40.5101 22.1647,26.9766 33.1719,67.1559 33.1719,120.808 0,59.8478 -10.6764,102.854 -32.1494,129.169 -21.5031,26.3451 -48.8406,39.5176 -82.3434,39.5176 -32.5103,0 -59.6674,-13.0222 -81.6818,-39.0063 -21.8339,-26.0143 -32.811,-64.8402 -32.811,-116.508z"/>
<glyph unicode="e" horiz-adv-x="556" d="M371.989 163.995l137.018 -23.0068c-17.5032,-50.1639 -45.352,-88.3282 -83.1855,-114.643 -37.9838,-26.1646 -85.5012,-39.3372 -142.312,-39.3372 -90.1627,0 -157.018,29.5029 -200.174,88.4785 -34.1644,47.3369 -51.3368,107.004 -51.3368,179.183 0,86.0125 22.4956,153.499 67.3363,202.159 44.8408,48.8406 101.651,73.1707 170.341,73.1707 76.9902,0 137.83,-25.503 182.491,-76.509 44.5099,-50.9759 65.8326,-129.169 63.8477,-234.489l-343.027 0c1.02253,-40.6604 11.9996,-72.3287 33.1719,-95.0047 21.0219,-22.676 47.3369,-33.9839 78.6743,-33.9839 21.5031,0 39.4875,5.83441 54.0134,17.4732 14.6462,11.6688 25.6534,30.5254 33.1419,56.5096zm7.99976 139.003c-0.992451,39.8484 -11.1576,70.1633 -30.6457,90.8243 -19.5182,20.8415 -43.1867,31.187 -71.1858,31.187 -29.8337,0 -54.4946,-11.0072 -73.9827,-32.8411 -19.5182,-21.8339 -29.0217,-51.6676 -28.6608,-89.1703l204.475 0z"/>
<glyph unicode="g" horiz-adv-x="610" d="M59.0057 -32.9915l156.988 -19.0069c2.67661,-18.4957 8.66139,-31.157 18.0145,-38.1643 13.1725,-9.83429 33.6531,-14.8266 61.6523,-14.8266 35.8485,0 62.6748,5.32315 80.6592,16.1499 11.9996,7.18775 21.1723,18.6761 27.3375,34.6756 4.18033,11.338 6.34567,32.5103 6.34567,63.0056l0.661634 75.8173c-41.3221,-56.4795 -93.3205,-84.6591 -155.995,-84.6591 -69.6821,0 -124.989,29.5029 -165.679,88.3282 -31.999,46.4948 -47.9986,104.508 -47.9986,173.679 0,87.0049 21.0219,153.319 62.8553,199.152 41.8333,45.8332 93.9821,68.84 156.326,68.84 64.1484,0 117.169,-28.1796 158.822,-84.5087l0 73.5015 127.996 0 0 -465.339c0,-61.141 -4.99233,-106.974 -15.1574,-137.139 -10.0147,-30.345 -24.1797,-54.0134 -42.495,-71.3362 -18.1649,-17.1724 -42.495,-30.8562 -73.0204,-40.5101 -30.4953,-9.83429 -68.9904,-14.6763 -115.485,-14.6763 -87.9974,0 -150.341,15.1875 -187.152,45.352 -36.841,30.3149 -55.1863,68.4791 -55.1863,115.004 0,4.48107 0.180446,10.1651 0.511263,16.6612zm123.004 302.998c0,-55.0059 10.6463,-95.1851 31.8186,-120.688 21.3527,-25.4729 47.6677,-38.3146 78.8247,-38.3146 33.3524,0 61.6824,13.1725 84.6892,39.3372 23.1572,26.1646 34.6456,64.8402 34.6456,116.147 0,53.6826 -10.9771,93.5009 -33.1419,119.515 -22.0144,25.9842 -50.0135,39.0063 -83.8471,39.0063 -32.8411,0 -59.8177,-12.8417 -81.1705,-38.3447 -21.1723,-25.503 -31.8186,-64.3289 -31.8186,-116.658z"/>
<glyph unicode="i" horiz-adv-x="277" d="M71.9978 589.005l0 127.004 136.988 0 0 -127.004 -136.988 0zm0 -589.005l0 518.992 136.988 0 0 -518.992 -136.988 0z"/>
<glyph unicode="k" horiz-adv-x="556" d="M67.0055 0l0 716.009 136.988 0 0 -379.838 160.506 182.822 168.987 0 -176.987 -189.648 190.009 -329.343 -147.996 0 -131.004 234.158 -63.5169 -67.998 0 -166.16 -136.988 0z"/>
<glyph unicode="l" horiz-adv-x="277" d="M71.9978 0l0 716.009 136.988 0 0 -716.009 -136.988 0z"/>
<glyph unicode="n" horiz-adv-x="610" d="M544.014 0l-137.018 0 0 264.503c0,55.9983 -3.00743,92.1777 -8.84184,108.508 -5.98478,16.4807 -15.4883,29.142 -28.8112,38.3146 -13.353,9.17266 -29.3525,13.6838 -47.9986,13.6838 -23.9993,0 -45.5024,-6.49605 -64.5093,-19.5182 -19.1573,-12.9921 -32.1795,-30.3149 -39.1567,-51.6676 -7.18775,-21.5031 -10.6764,-61.1711 -10.6764,-119.154l0 -234.67 -136.988 0 0 518.992 126.974 0 0 -76.1481c45.5024,58.1637 102.674,87.1553 171.844,87.1553 30.345,0 58.1637,-5.50359 83.3358,-16.3303 25.3225,-11.0072 44.3295,-24.8414 57.1712,-41.683 12.9921,-16.992 21.9843,-36.1493 27.0067,-57.6524 5.1427,-21.5031 7.66894,-52.1789 7.66894,-92.1777l0 -322.156z"/>
<glyph unicode="o" horiz-adv-x="610" d="M39.9988 265.827c0,45.6828 11.1576,89.8319 33.6531,132.507 22.5256,42.8258 54.3442,75.3361 95.5159,97.8316 41.1717,22.4956 87.0049,33.8336 137.83,33.8336 78.4939,0 142.672,-25.503 192.836,-76.509 50.1639,-51.1564 75.1556,-115.485 75.1556,-193.498 0,-78.6443 -25.3225,-143.815 -75.8173,-195.483 -50.6752,-51.6676 -114.342,-77.5014 -191.182,-77.5014 -47.4873,0 -92.8092,10.8267 -135.996,32.3299 -43.0062,21.5031 -75.8173,52.9909 -98.3429,94.6738 -22.4956,41.5025 -33.6531,92.1476 -33.6531,151.815zm140.988 -7.33813c0,-51.4872 12.1801,-90.9747 36.5102,-118.312 24.5105,-27.518 54.4946,-41.1717 90.3431,-41.1717 35.6681,0 65.6522,13.6537 89.8319,41.1717 24.1496,27.3375 36.3297,67.1559 36.3297,119.335 0,50.8255 -12.1801,89.9823 -36.3297,117.32 -24.1797,27.4879 -54.1638,41.1717 -89.8319,41.1717 -35.8485,0 -65.8326,-13.6838 -90.3431,-41.1717 -24.3301,-27.3375 -36.5102,-66.8251 -36.5102,-118.342z"/>
<glyph unicode="r" horiz-adv-x="389" d="M203.001 0l-136.988 0 0 518.992 126.974 0 0 -73.6519c21.8339,34.826 41.5025,57.6524 59.0057,68.4791 17.5032,10.8568 37.3523,16.18 59.517,16.18 31.3374,0 61.5019,-8.66139 90.4935,-25.8338l-42.495 -119.666c-23.1873,15.0071 -44.6603,22.4956 -64.5093,22.4956 -19.3378,0 -35.6681,-5.32315 -48.991,-15.8191 -13.353,-10.6764 -23.8489,-29.6833 -31.5178,-57.3517 -7.66894,-27.6683 -11.4884,-85.6516 -11.4884,-173.829l0 -159.995z"/>
<glyph unicode="s" horiz-adv-x="556" d="M23.0068 146.011l137.981 20.9918c5.83441,-26.4954 17.6837,-46.6753 35.6681,-60.329 17.8341,-13.8342 43.0062,-20.661 75.1857,-20.661 35.4877,0 62.1635,6.49605 80.148,19.4881 11.9996,9.17266 18.0145,21.5031 18.0145,36.841 0,10.3155 -3.33825,18.9769 -9.83429,25.8338 -6.82686,6.49605 -22.1647,12.6613 -45.8332,18.1649 -110.824,24.4805 -181.017,46.8257 -210.67,67.0055 -41.1717,28.1495 -61.6523,67.1559 -61.6523,116.989 0,45.1716 17.8341,83.005 53.3217,113.651 35.4877,30.6758 90.4935,46.0137 164.988,46.0137 71.0054,0 123.846,-11.6688 158.341,-34.826 34.4952,-23.3376 58.3441,-57.6825 71.3362,-103.185l-128.989 -23.9993c-5.50359,20.3302 -16.18,35.9989 -31.6682,46.8557 -15.5183,10.8267 -37.6831,16.1499 -66.5243,16.1499 -36.3297,0 -62.3139,-4.99233 -78.1631,-15.1574 -10.4959,-7.15768 -15.6687,-16.5108 -15.6687,-27.8488 0,-9.83429 4.51114,-18.1649 13.6838,-24.9917 12.4808,-9.17266 55.3367,-21.9843 128.658,-38.6755 73.3512,-16.6612 124.508,-36.9914 153.499,-61.141 28.8412,-24.3602 43.1867,-58.5246 43.1867,-102.192 0,-47.4873 -19.849,-88.4785 -59.6674,-122.643 -39.668,-34.1644 -98.5234,-51.3368 -176.506,-51.3368 -70.6746,0 -126.673,14.3154 -167.995,42.8258 -41.1717,28.5104 -68.1784,67.1559 -80.8397,116.177z"/>
<glyph unicode="t" horiz-adv-x="333" d="M309.013 518.992l0 -108.989 -94.0122 0 0 -210.159c0,-42.6754 0.84208,-67.5168 2.67661,-74.5241 1.83453,-6.97723 5.83441,-12.8116 12.3305,-17.4732 6.3156,-4.51114 13.9845,-6.85694 23.1572,-6.85694 12.8417,0 31.157,4.3307 55.3367,13.1725l11.4884 -106.673c-31.8186,-13.6537 -67.8175,-20.4806 -108.147,-20.4806 -24.691,0 -46.8557,4.15025 -66.6747,12.4808 -19.849,8.33058 -34.3448,19.1874 -43.4874,32.3299 -9.3531,13.353 -15.6687,31.187 -19.3378,53.863 -2.85706,15.9995 -4.3307,48.3294 -4.3307,97.1399l0 227.181 -63.0056 0 0 108.989 63.0056 0 0 103.004 136.988 80.99 0 -183.994 94.0122 0z"/>
<glyph unicode="v" horiz-adv-x="556" d="M214.67 0l-209.167 518.992 143.996 0 97.6813 -264.834 28.33 -88.4785c7.4885,22.4956 12.3305,37.3222 14.165,44.4799 4.66151,14.6763 9.50347,29.3525 14.8266,43.9987l99.0045 264.834 140.988 0 -206.159 -518.992 -123.665 0z"/>
</font>
<style type="text/css">
<![CDATA[
#font-face { font-family:"Arial";font-variant:normal;font-style:normal;font-weight:bold;src:url("#FontID0") format(svg)}
.str0 {stroke:#727376;stroke-width:26.67;stroke-miterlimit:2.61313}
.fil4 {fill:none}
.fil0 {fill:#E6E7E8}
.fil1 {fill:#727376}
.fil3 {fill:#00A859}
.fil2 {fill:#3E4095}
.fnt0 {font-weight:bold;font-size:130.91px;font-family:'Arial'}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0" x="-0.01" y="-0.02" width="2666.67" height="666.67"/>
<text x="175.55" y="377.12" class="fil1 fnt0">Stock Cover =</text>
<text x="1042.23" y="458.42" class="fil1 fnt0">Average </text>
<text x="2186.98" y="458.42" class="fil1 fnt0"> Sales</text>
<text x="1590.41" y="458.42" class="fil2 fnt0">Historical</text>
<text x="1323.93" y="269.91" class="fil1 fnt0">Stock on Hand</text>
<rect class="fil1" x="1192.26" y="307.61" width="1118.5" height="6.28"/>
<text x="175.55" y="1036.94" class="fil1 fnt0">Stock Cover =</text>
<text x="1042.23" y="1118.24" class="fil1 fnt0">Average </text>
<text x="2099.6" y="1118.24" class="fil1 fnt0"> Sales</text>
<text x="1590.41" y="1118.24" class="fil3 fnt0">Planned</text>
<text x="1323.93" y="929.72" class="fil1 fnt0">Stock on Hand</text>
<rect class="fil1" x="1192.26" y="967.42" width="1118.5" height="6.28"/>
<rect class="fil4 str0" x="2.01" y="-1.79" width="2666.67" height="1333.33"/>
</g>
</svg>
I'm using the react-map-gl-draw library to draw polygons on the map. I would like to find out the className for the icons of react-map-gl-draw.
For example, className="mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_trash" will give me a button with trash can icon. I was wondering where can I find other icons' className.
In terms of buttons you can add, these are your options:
.mapbox-gl-draw_point {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>');
}
.mapbox-gl-draw_polygon {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>');
}
.mapbox-gl-draw_line {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>');
}
.mapbox-gl-draw_trash {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>');
}
.mapbox-gl-draw_uncombine {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>');
}
.mapbox-gl-draw_combine {
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>');
}
It seems like everything else is overriding default Mapbox styling.
Here's the full css file of classes from react-map-gl-draw if you want to check it out.
I'm working on a clone of 2 precedent website in AngularJs (v1.5.5) + Snap Svg ( v0.5.1 )
in this new one i'm drawing a big stage in which i put a subgroup and fill it with the content of an external svg file imported.
the main code is :
scope.addDimPlus = function (item, position, side) {
Snap.load('img/basi/' + item.svg, function ( fragment ) {
side = side || 'dx';
var g = scope.gDimPlus.g();
g.attr({'type' : 'dim-plus-group'});
var other = fragment.selectAll('path, rect, line, text');
for (var i=0; i<other.length; i++) {
g.append(other[i]);
}
var text = fragment.select('text');
var path = g.select('path');
g.addClass('dim-plus-group');
path.attr({type : 'dim-plus'});
g.append(text);
position = position || 0;
g.attr('id', g.id);
g.transform('transform(' + position + ')');
});
};
where item.svg is the filename to load.
In the worknig one the code of the "generated" main stage is this: (taken by Chrome console)
<svg id="svgChain" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 2233 456">
<defs>
</defs>
<rect></rect> <-- and other <rect> and <g>
<g id="chain-group" transform="matrix(1.4802,0,0,1.4802,822.7841,72.7528)">
<g> <-- other 5 <g>
<g id="verticalSepParetiGroup" transform="matrix(1,0,0,1,22.68,31.18)">
<g id="gSk5xpgcgh4i" transform="matrix(1,0,0,1,0,-12.755)" >
<path d="M42.7,157.5
c-2.1,0-4.2,0-6.4,0c-2.7,0-5.2-0.1-7.5-1.9c-2.5-2-3.2-4.9-3.2-8c0-5.7,0-11.4,0-17.1c0-9.9,0-19.9,0-29.8c0-11.2,0-22.4,0-33.6
c0-9.5,0-18.9,0-28.4c0-4.7,0-9.4,0-14.1c0-5,3.8-8.8,8.8-8.8c2.3,0,4.7,0,7,0c1,0,2,0,3-0.3c1.7-0.6,3.1-2,3.6-3.8
c0.6-1.9,0.2-4.4,0.2-6.4c0-1.3,0-2.6,0-3.9c0-0.2,0.1-1.2,0-1.3c-0.3-0.2-1.9,0-2.2,0c-1.7,0-3.4,0-5.1,0c-10.5,0-20.9,0-31.4,0
c-2,0-4,0-6,0c-1,0-2.2-0.2-3.2,0c-0.2,0-0.2,0-0.3,0.1c-0.1,0.1,0,0.7,0,0.8c0,0.6,0,1.1,0,1.7c0,2.4,0,4.7,0,7.1
c0,3.2,2.4,5.9,5.7,5.9c4.7,0,8.4,3.9,8.5,8.5c0,0.4,0,0.7,0,1.1c0,2.6,0,5.2,0,7.7c0,4.6,0,9.1,0,13.7c0,5.9,0,11.8,0,17.6
c0,6.6,0,13.2,0,19.7c0,6.7,0,13.3,0,20c0,6.1,0,12.3,0,18.4c0,4.9,0,9.9,0,14.8c0,3.1,0,6.2,0,9.4c0,3.1-0.1,6-2.5,8.3
c-1.6,1.6-3.8,2.5-6,2.5c-2.5,0-4.8,1.7-5.5,4.2c-0.3,1.1-0.2,2.4-0.2,3.6c0,1.8,0,3.6,0,5.4c0,0.3-0.2,2.2,0,2.4
c0.1,0.1,0.9,0,1.1,0c0.8,0,1.7,0,2.5,0c2.8,0,5.5,0,8.3,0c7.3,0,14.5,0,21.8,0c3,0,6.1,0,9.1,0c1.1,0,2.1,0,3.2,0
c0.6,0,1.3,0.1,1.8,0c0.4-0.1,0.3,0.1,0.3-0.5c0-1.6,0-3.1,0-4.7c0-3.2,0.6-7.1-2.2-9.3C45.1,157.9,43.9,157.5,42.7,157.5z"></path>
</g>
</g>
and in the NON working project:
<svg id="svgChain" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 859 429.5">
<g id="base-group" transform="matrix(1.8364,0,0,1.8364,183.3183,131.4606)">
<g id="dimaplus" transform="matrix(1,0,0,1,0,4.1)">
<g type="dim-plus-group" id="gSk5xprcz5f" class="dim-plus-group" transform="matrix(1,0,0,1,0,0)"><path d="M94.13 143.83V33.39M113.46 33.94v-.55M118.99 33.94h-5.53M118.99 33.94v109.34M113.46 143.28h5.53M113.46 143.83v-.55M52.61 171.44h30.48M2.06 92.15l35.79 70.25M83.09 5.77H41.67M.25 47.19v37.44M37.85 162.4l1.17 1.95m0 0l1.43 1.77m0 0l1.65 1.56m0 0l1.86 1.32m0 0l2.01 1.05m0 0l2.15.77m0 0l2.22.47m0 0l2.27.15M88.61 171.44v-27.61M88.06 143.83h.55M88.61 171.44v4.97M83.64 176.97h4.42M88.06 143.83h-4.42M83.09 5.77v27.62M.25 84.63l.12 1.95m0 0l.34 1.92m0 0l.57 1.87m0 0l.78 1.78M83.09 5.77V.8M83.09 143.83v27.61M83.09 143.83h.55M41.67 5.77l-4.06.2m0 0l-4.02.6m0 0l-3.94.99m0 0l-3.83 1.37m0 0l-3.67 1.73m0 0l-3.49 2.09m0 0l-3.26 2.42m0 0l-3.01 2.73m0 0l-2.73 3.02m0 0l-2.42 3.26m0 0l-2.09 3.49m0 0l-1.74 3.67m0 0l-1.37 3.83m0 0l-.99 3.94m0 0l-.6 4.02m0 0l-.2 4.06M83.09 176.41v-4.97M88.06.25h-4.42M83.64 33.39h-.55M83.64 33.39h4.42M88.61 176.41l-.16.39m0 0l-.39.17M88.61 33.39V5.77M88.61 33.39h-.55M88.61.8v4.97M83.09.8l.07-.27m0 0l.21-.2m0 0l.27-.08M88.61 143.83h30.38M118.99 169.79H88.61M83.64 176.97l-.39-.17m0 0l-.16-.39M118.99 7.43v25.96M88.06.25l.39.16m0 0l.16.39M118.99 33.39H88.61M88.61 7.43h30.38M118.99 5.77H88.61M118.99 7.43V5.77M118.99 171.44v-1.65M118.99 143.83v25.96M88.61 171.44h30.38M99.38 158.74l.2-1.3m0 0l.57-1.19m0 0l.89-.96m0 0l1.14-.66m0 0l1.29-.29m0 0l1.31.09m0 0l1.23.49m0 0l1.03.82m0 0l.74 1.09m0 0l.39 1.25m0 0v1.32m0 0l-.39 1.26m0 0l-.74 1.09m0 0l-1.03.82m0 0l-1.23.48m0 0l-1.31.1m0 0l-1.29-.3m0 0l-1.14-.65m0 0l-.89-.97m0 0l-.57-1.19m0 0l-.2-1.3M99.38 18.48l.2-1.31m0 0l.57-1.18m0 0l.89-.97m0 0l1.14-.66m0 0l1.29-.29m0 0l1.31.1m0 0l1.23.48m0 0l1.03.82m0 0l.74 1.09m0 0l.39 1.26m0 0v1.31m0 0l-.39 1.26m0 0l-.74 1.09m0 0l-1.03.82m0 0l-1.23.48m0 0l-1.31.1m0 0l-1.29-.29m0 0l-1.14-.66m0 0l-.89-.97m0 0l-.57-1.18m0 0l-.2-1.3M49.96 130.03l.18-2.03m0 0l.56-1.96m0 0l.91-1.83m0 0l1.23-1.62m0 0l1.5-1.38m0 0l1.74-1.07m0 0l1.9-.74m0 0l2-.37m0 0h2.04m0 0l2 .37m0 0l1.9.74m0 0l1.74 1.07m0 0l1.5 1.38m0 0l1.23 1.62m0 0l.91 1.83m0 0l.56 1.96m0 0l.19 2.03m0 0l-.19 2.03m0 0l-.56 1.96m0 0l-.91 1.82m0 0l-1.23 1.63m0 0l-1.5 1.37m0 0l-1.74 1.07m0 0l-1.9.74m0 0l-2 .37m0 0h-2.04m0 0l-2-.37m0 0l-1.9-.74m0 0l-1.74-1.07m0 0l-1.5-1.37m0 0l-1.23-1.63m0 0l-.91-1.82m0 0l-.56-1.96m0 0l-.18-2.03M38.91 130.03l.2-2.95m0 0l.59-2.89m0 0l.96-2.79m0 0l1.33-2.63m0 0l1.67-2.43m0 0l1.98-2.19m0 0l2.26-1.91m0 0l2.48-1.59m0 0l2.68-1.24m0 0l2.82-.87m0 0l2.91-.49m0 0l2.95-.1m0 0l2.93.29m0 0l2.88.69m0 0l2.75 1.06m0 0l2.59 1.42m0 0l2.37 1.75m0 0l2.12 2.05m0 0l1.83 2.31m0 0l1.51 2.54m0 0l1.15 2.72m0 0l.78 2.85m0 0l.39 2.92m0 0v2.95m0 0l-.39 2.93m0 0l-.78 2.84m0 0l-1.15 2.72m0 0l-1.51 2.54m0 0l-1.83 2.31m0 0l-2.12 2.05m0 0l-2.37 1.75m0 0l-2.59 1.42m0 0l-2.75 1.06m0 0l-2.88.69m0 0l-2.93.29m0 0l-2.95-.1m0 0l-2.91-.49m0 0l-2.82-.87m0 0l-2.68-1.24m0 0l-2.48-1.59m0 0l-2.26-1.91m0 0l-1.98-2.18m0 0l-1.67-2.44m0 0l-1.33-2.63m0 0l-.96-2.79m0 0l-.59-2.89m0 0l-.2-2.94M30.63 47.19l.19-2.03m0 0l.55-1.96m0 0l.91-1.82m0 0l1.23-1.63m0 0l1.51-1.37m0 0l1.73-1.08m0 0l1.9-.73m0 0l2-.38m0 0h2.04m0 0l2 .38m0 0l1.91.73m0 0l1.73 1.08m0 0l1.5 1.37m0 0l1.23 1.63m0 0l.91 1.82m0 0l.56 1.96m0 0l.19 2.03m0 0l-.19 2.03m0 0l-.56 1.96m0 0l-.91 1.83m0 0l-1.23 1.62m0 0L48.33 56m0 0l-1.73 1.08m0 0l-1.91.73m0 0l-2 .38m0 0h-2.04m0 0l-2-.38m0 0l-1.9-.73m0 0L35.02 56m0 0l-1.51-1.37m0 0l-1.23-1.62m0 0l-.91-1.83m0 0l-.55-1.96m0 0l-.19-2.03M11.3 47.19l.2-3.46m0 0l.59-3.42m0 0l.98-3.33m0 0l1.35-3.19m0 0l1.7-3.02m0 0l2.04-2.81m0 0l2.34-2.55m0 0l2.63-2.27m0 0l2.86-1.96m0 0l3.07-1.62m0 0l3.23-1.26m0 0l3.35-.88m0 0l3.43-.49m0 0l3.47-.1m0 0l3.45.3m0 0l3.4.69m0 0l3.3 1.07m0 0l3.16 1.44m0 0l2.97 1.79m0 0l2.74 2.12m0 0l2.49 2.41m0 0l2.19 2.69m0 0l1.88 2.92m0 0l1.53 3.11m0 0l1.16 3.26m0 0l.79 3.38m0 0l.4 3.45m0 0v3.47m0 0l-.4 3.44m0 0l-.79 3.38m0 0l-1.16 3.26m0 0l-1.53 3.12m0 0l-1.88 2.91m0 0l-2.19 2.69m0 0l-2.49 2.42m0 0l-2.74 2.11m0 0l-2.97 1.79m0 0l-3.16 1.44m0 0l-3.3 1.08m0 0l-3.4.68m0 0l-3.45.3m0 0l-3.47-.1m0 0l-3.43-.49m0 0l-3.35-.88m0 0l-3.23-1.26m0 0l-3.07-1.62m0 0l-2.86-1.96m0 0l-2.63-2.27m0 0l-2.34-2.55m0 0l-2.04-2.81m0 0l-1.7-3.02m0 0l-1.35-3.19m0 0l-.98-3.33m0 0l-.59-3.42m0 0l-.2-3.46" fill="none" stroke="#000" stroke-width=".5" type="dim-plus"></path>
In the first one I've a path that is INSIDE the "chain-group" group, instead in the other project the path is bigger that the main group (base-group)
does anyone help me to find what i'm missing??? thanks!!!