I am using a pivot table tool (webdatarocks) in an azure DevOps extension project. The tool icons in an SVG file, but azure DevOps extensions projects do not accept SVG file types and gives the following error in the publishing stage.
Error processing ... SVG file types in extension package are not
supported. File at '/dist *****.svg' is of
type SVG, please convert it to a different format (like PNG or JPG)
and try again.
Which way should I go? I tried to use some npm packages in webpack, to convert SVG to PNG or JPEG but I failed.
The SVG file
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="webdatarocks-icons" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode=" " horiz-adv-x="512" d="" />
<glyph unicode="" glyph-name="arrow-down" d="M798.133 371.467c-16.533 16.533-43.733 16.533-60.267 0l-183.2-183.2v579.733c0 23.467-19.2 42.667-42.667 42.667s-42.667-19.2-42.667-42.667v-579.733l-183.2 183.2c-16.533 16.533-43.733 16.533-60.267 0s-16.533-43.733 0-60.267l256-256c0.533-0.533 1.067-1.067 1.6-1.6 0 0 0 0 0 0s0.267-0.267 0.267-0.267c0 0 0 0 0.267-0.267 0 0 0 0 0.267-0.267 0 0 0.267-0.267 0.267-0.267s0 0 0 0 0.267-0.267 0.267-0.267c0 0 0 0 0 0 3.2-2.667 6.4-4.533 9.867-6.133 0 0 0 0 0.267 0 0 0 0 0 0.267 0 4.533-1.867 9.6-3.2 14.933-3.467 0 0 0 0 0 0 0.267 0 0.267 0 0.533 0 0 0 0 0 0 0s0.267 0 0.267 0c0 0 0.267 0 0.267 0s0.267 0 0.267 0 0.267 0 0.533 0 0.267 0 0.533 0c0 0 0.267 0 0.267 0s0.267 0 0.267 0c0 0 0.267 0 0.267 0s0 0 0 0c0.267 0 0.267 0 0.533 0 0 0 0 0 0 0 5.333 0.267 10.4 1.333 14.933 3.467 0 0 0 0 0 0s0.267 0 0.267 0c0 0 0.267 0 0.267 0s0 0 0 0c3.2 1.333 6.133 3.2 9.067 5.6 0 0 0 0 0 0s0.267 0.267 0.267 0.267c0 0 0 0 0 0s0.267 0.267 0.267 0.267c0 0 0 0 0.267 0.267 0 0 0 0 0.267 0.267 0 0 0.267 0.267 0.267 0.267s0 0 0 0c0.8 0.533 1.333 1.333 2.133 2.133l255.733 255.733c17.333 16.8 17.333 44 0.533 60.533z" />
<glyph unicode="" glyph-name="check" d="M883.467 712.8c-16.533 16.533-43.733 16.533-60.267 0l-439.2-439.2-183.2 183.2c-16.533 16.533-43.733 16.533-60.267 0s-16.533-43.733 0-60.267l213.333-213.333c8.267-8.267 19.2-12.533 30.133-12.533s21.867 4.267 30.133 12.533l469.333 469.333c16.8 16.533 16.8 43.733 0 60.267z" />
<glyph unicode="" glyph-name="chevron-down" d="M798.133 584.8c-16.533 16.533-43.733 16.533-60.267 0l-225.867-225.867-225.867 225.867c-16.533 16.533-43.733 16.533-60.267 0s-16.533-43.733 0-60.267l256-256c8.267-8.267 19.2-12.533 30.133-12.533s21.867 4.267 30.133 12.533l256 256c16.8 16.533 16.8 43.733 0 60.267z" />
<glyph unicode="" glyph-name="chevron-right" d="M670.133 456.8l-256 256c-16.533 16.533-43.733 16.533-60.267 0s-16.533-43.733 0-60.267l225.867-225.867-225.867-225.867c-16.533-16.533-16.533-43.733 0-60.267 8.267-8.267 19.2-12.533 30.133-12.533s21.867 4.267 30.133 12.533l256 256c16.8 16.533 16.8 43.733 0 60.267z" />
<glyph unicode="" glyph-name="chevron-up" d="M798.133 328.8l-256 256c-16.533 16.533-43.733 16.533-60.267 0l-256-256c-16.533-16.533-16.533-43.733 0-60.267s43.733-16.533 60.267 0l225.867 225.867 225.867-225.867c8.267-8.267 19.2-12.533 30.133-12.533s21.867 4.267 30.133 12.533c16.8 16.533 16.8 43.733 0 60.267z" />
<glyph unicode="" glyph-name="menu" d="M896 469.334h-768c-23.467 0-42.667-19.2-42.667-42.667s19.2-42.667 42.667-42.667h768c23.467 0 42.667 19.2 42.667 42.667s-19.2 42.667-42.667 42.667zM128 640h768c23.467 0 42.667 19.2 42.667 42.667s-19.2 42.667-42.667 42.667h-768c-23.467 0-42.667-19.2-42.667-42.667s19.2-42.667 42.667-42.667zM896 213.334h-768c-23.467 0-42.667-19.2-42.667-42.667s19.2-42.667 42.667-42.667h768c23.467 0 42.667 19.2 42.667 42.667s-19.2 42.667-42.667 42.667z" />
<glyph unicode="" glyph-name="x" d="M572.267 426.667l225.867 225.867c16.533 16.533 16.533 43.733 0 60.267s-43.733 16.533-60.267 0l-225.867-225.867-225.867 225.867c-16.533 16.533-43.733 16.533-60.267 0s-16.533-43.733 0-60.267l225.867-225.867-225.867-225.867c-16.533-16.533-16.533-43.733 0-60.267 8.267-8.267 19.2-12.533 30.133-12.533s21.867 4.267 30.133 12.533l225.867 225.867 225.867-225.867c8.267-8.267 19.2-12.533 30.133-12.533s21.867 4.267 30.133 12.533c16.533 16.533 16.533 43.733 0 60.267l-225.867 225.867z" />
<glyph unicode="" glyph-name="act_add" d="M512 789.333c-188.513 0-341.333-152.82-341.333-341.333s152.82-341.333 341.333-341.333c188.513 0 341.333 152.82 341.333 341.333s-152.82 341.333-341.333 341.333zM682.667 411.477h-134.144v-134.144h-73.045v134.144h-134.144v73.045h134.144v134.144h73.045v-134.144h134.144z" />
<glyph unicode="" glyph-name="act_calc" d="M763.221 806.4h-502.443c-31.123-0.941-55.995-26.396-55.995-57.661 0-0.489 0.006-0.976 0.018-1.462l-0.001-598.627c-0.011-0.414-0.017-0.901-0.017-1.39 0-31.264 24.872-56.72 55.909-57.659l502.529-0.002c31.123 0.941 55.995 26.396 55.995 57.661 0 0.489-0.006 0.976-0.018 1.462l0.001 598.627c0.011 0.414 0.017 0.901 0.017 1.39 0 31.264-24.872 56.72-55.909 57.659zM387.755 189.611c0.003-0.106 0.004-0.231 0.004-0.356 0-8.621-6.801-15.654-15.33-16.027l-79.906-0.001c-8.563 0.374-15.364 7.407-15.364 16.028 0 0.125 0.001 0.25 0.004 0.374v82.584c-0.003 0.106-0.004 0.231-0.004 0.356 0 8.621 6.801 15.654 15.33 16.027l78.199 0.001c8.563-0.374 15.364-7.407 15.364-16.028 0-0.125-0.001-0.25-0.004-0.374zM387.755 372.565c0.003-0.106 0.004-0.231 0.004-0.356 0-8.621-6.801-15.654-15.33-16.027l-79.906-0.001c-8.563 0.374-15.364 7.407-15.364 16.028 0 0.125 0.001 0.25 0.004 0.374v82.584c-0.003 0.106-0.004 0.231-0.004 0.356 0 8.621 6.801 15.654 15.33 16.027l78.199 0.001c8.563-0.374 15.364-7.407 15.364-16.028 0-0.125-0.001-0.25-0.004-0.374zM568.32 189.611c0.003-0.106 0.004-0.231 0.004-0.356 0-8.621-6.801-15.654-15.33-16.027l-79.906-0.001c-8.563 0.374-15.364 7.407-15.364 16.028 0 0.125 0.001 0.25 0.004 0.374v82.584c-0.003 0.106-0.004 0.231-0.004 0.356 0 8.621 6.801 15.654 15.33 16.027l78.199 0.001c8.563-0.374 15.364-7.407 15.364-16.028 0-0.125-0.001-0.25-0.004-0.374zM568.32 372.565c0.003-0.106 0.004-0.231 0.004-0.356 0-8.621-6.801-15.654-15.33-16.027l-79.906-0.001c-8.563 0.374-15.364 7.407-15.364 16.028 0 0.125 0.001 0.25 0.004 0.374v82.584c-0.003 0.106-0.004 0.231-0.004 0.356 0 8.621 6.801 15.654 15.33 16.027l78.199 0.001c8.563-0.374 15.364-7.407 15.364-16.028 0-0.125-0.001-0.25-0.004-0.374zM748.885 189.611c0.003-0.106 0.004-0.231 0.004-0.356 0-8.621-6.801-15.654-15.33-16.027l-80.247-0.001c-8.563 0.374-15.364 7.407-15.364 16.028 0 0.125 0.001 0.25 0.004 0.374v82.584c-0.003 0.106-0.004 0.231-0.004 0.356 0 8.621 6.801 15.654 15.33 16.027l78.199 0.001c8.563-0.374 15.364-7.407 15.364-16.028 0-0.125-0.001-0.25-0.004-0.374zM748.885 372.565c0.003-0.106 0.004-0.231 0.004-0.356 0-8.621-6.801-15.654-15.33-16.027l-80.247-0.001c-8.563 0.374-15.364 7.407-15.364 16.028 0 0.125 0.001 0.25 0.004 0.374v82.584c-0.003 0.106-0.004 0.231-0.004 0.356 0 8.621 6.801 15.654 15.33 16.027l78.199 0.001c8.563-0.374 15.364-7.407 15.364-16.028 0-0.125-0.001-0.25-0.004-0.374zM748.885 570.539c0.003-0.106 0.004-0.231 0.004-0.356 0-8.621-6.801-15.654-15.33-16.027l-441.036-0.001c-8.563 0.374-15.364 7.407-15.364 16.028 0 0.125 0.001 0.25 0.004 0.374v147.779c-0.003 0.106-0.004 0.231-0.004 0.356 0 8.621 6.801 15.654 15.33 16.027l438.988 0.001c8.563-0.374 15.364-7.407 15.364-16.028 0-0.125-0.001-0.25-0.004-0.374z" />
<glyph unicode="" glyph-name="act_filter" d="M844.8 806.4h-665.6l256-358.4v-358.4l153.6 153.6v204.8z" />
<glyph unicode="" glyph-name="act_font" d="M415.744 259.584h192.171l34.133-118.784h143.019l-197.291 614.4h-151.893l-196.949-614.4h142.336zM512 588.971v0l63.488-217.429h-128.341z" />
<glyph unicode="" glyph-name="act_move" d="M307.2 627.2h409.6v-51.2h-409.6v51.2zM307.2 473.6h409.6v-51.2h-409.6v51.2zM307.2 320h409.6v-51.2h-409.6v51.2z" />
<glyph unicode="" glyph-name="act_search" d="M647.089 366.868h-28.751l-10.634 10.634c35.681 39.692 57.503 92.468 57.503 150.34 0 0.315-0.001 0.631-0.002 0.946 0 129.155-104.74 233.896-233.944 233.896s-233.945-104.741-233.945-233.945c0-129.204 104.741-233.945 233.945-233.945 0.266-0.001 0.582-0.002 0.897-0.002 57.872 0 110.647 21.822 150.547 57.686l10.427-10.817v-28.751l179.988-179.988 53.957 53.957zM430.868 366.868c-89.399 0-161.871 72.472-161.871 161.871s72.472 161.871 161.871 161.871c89.399 0 161.871-72.472 161.871-161.871 0-0.117 0-0.256 0-0.394 0-89.181-72.296-161.477-161.477-161.477-0.139 0-0.277 0-0.416 0.001z" />
<glyph unicode="" glyph-name="act_sigma" d="M256 684.308h512v-111.458h-90.978v32.689h-226.462l146.511-157.538-146.511-157.538h226.855v30.72h90.585v-109.489h-512l222.523 236.308z" />
<glyph unicode="" glyph-name="act_table_settings" d="M158.208 325.12l67.072-112.64c6.119-9.974 16.963-16.526 29.338-16.526 3.788 0 7.433 0.614 10.84 1.748l-0.242-0.070 98.816 32.256c7.52-4.955 16.404-10.063 25.589-14.659l1.547-0.701 18.432-98.816c3.403-15.046 16.659-26.113 32.499-26.113 0.095 0 0.189 0 0.283 0.001h134.642c0.080-0.001 0.174-0.001 0.269-0.001 15.84 0 29.096 11.067 32.457 25.89l0.042 0.223 20.48 99.328c10.742 5.309 19.626 10.417 28.174 15.996l-1.038-0.636 98.816-32.256c3.165-1.064 6.81-1.678 10.598-1.678 12.375 0 23.219 6.552 29.253 16.377l0.085 0.149 67.072 112.64c2.846 4.665 4.531 10.308 4.531 16.345 0 9.904-4.536 18.749-11.643 24.57l-0.056 0.045-75.776 66.048c0 5.12 0 10.24 0 15.36s0 10.24 0 15.36l78.848 66.56c7.164 5.866 11.699 14.711 11.699 24.615 0 6.037-1.685 11.68-4.611 16.485l0.079-0.14-67.584 112.64c-6.165 9.733-16.877 16.101-29.076 16.101-3.885 0-7.62-0.646-11.102-1.836l0.241 0.072-98.816-32.256c-7.518 4.952-16.401 10.061-25.586 14.657l-1.55 0.703-18.432 99.328c-3.358 15.105-16.642 26.23-32.525 26.23-0.987 0-1.964-0.043-2.928-0.127l0.125 0.009h-134.144c-0.84 0.075-1.816 0.118-2.803 0.118-15.882 0-29.166-11.126-32.483-26.009l-0.041-0.222-20.48-99.328c-10.748-5.315-19.631-10.423-28.182-16l1.046 0.64-96.768 32.768c-3.241 1.119-6.975 1.765-10.86 1.765-12.199 0-22.911-6.368-28.993-15.96l-67.155-113.292c-2.846-4.665-4.531-10.308-4.531-16.345 0-9.904 4.536-18.749 11.643-24.57l0.056-0.045 78.336-66.56c0-5.12 0-10.24 0-15.36s0-10.24 0-15.36l-78.848-66.56c-6.964-5.862-11.359-14.585-11.359-24.333 0-6.153 1.75-11.897 4.781-16.761l-0.078 0.134zM512 578.56c70.322-2.276 126.464-59.83 126.464-130.496 0-72.106-58.454-130.56-130.56-130.56-72.084 0-130.523 58.417-130.56 130.492v0.004c1.144 72.358 60.070 130.576 132.592 130.576 0.726 0 1.45-0.006 2.173-0.017l-0.109 0.001z" />
<glyph unicode="" glyph-name="notif_info" d="M588.8 704c0-42.415-34.385-76.8-76.8-76.8s-76.8 34.385-76.8 76.8c0 42.415 34.385 76.8 76.8 76.8s76.8-34.385 76.8-76.8zM460.8 550.4h102.4v-435.2h-102.4v435.2z" />
<glyph unicode="" glyph-name="notif_warning" d="M563.2 179.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM435.2 768l25.6-435.2h102.4l25.6 435.2h-153.6z" />
<glyph unicode="" glyph-name="preloader" d="M512.235 21.333c-141.739 0-274.133 71.851-352.768 187.477v-174.869h-34.155v256h256.149v-34.133h-211.008c69.077-122.56 200.384-200.384 341.781-200.384 211.221 0 387.2 171.819 392.277 382.997l34.155-0.768c-5.547-229.589-196.843-416.32-426.432-416.32zM85.675 441.088l17.067 0.256-17.173 1.92c-0.149 1.557-0.235 3.115-0.235 4.736 0 235.264 191.531 426.667 426.901 426.667 146.688 0 281.195-74.923 358.976-195.541v170.987h34.155v-256.021h-256.171v34.176h212.053c-67.179 129.835-201.408 212.309-349.013 212.309-216.555 0-392.747-176.128-392.747-392.555l0.32-6.421-34.133-0.512z" />
<glyph unicode="" glyph-name="kpi_status_good" d="M512 960c-282.773 0-512-229.227-512-512s229.227-512 512-512 512 229.227 512 512-229.227 512-512 512z" />
<glyph unicode="" glyph-name="kpi_status_bad" d="M512 960c-282.773 0-512-229.227-512-512s229.227-512 512-512 512 229.227 512 512-229.227 512-512 512zM512 64c-212.075 0-384 171.925-384 384s171.925 384 384 384c212.075 0 384-171.925 384-384s-171.925-384-384-384z" />
<glyph unicode="" glyph-name="kpi_status_ok" d="M512 960c-282.773 0-512-229.227-512-512s229.227-512 512-512 512 229.227 512 512-229.227 512-512 512zM128 448c0 212.075 171.925 384 384 384v-768c-212.075 0-384 171.925-384 384z" />
<glyph unicode="" glyph-name="kpi_status_rising" d="M512 960c-282.667 0-512-229.333-512-512s229.333-512 512-512 512 229.333 512 512-229.333 512-512 512zM128 448c0 212.053 171.947 384 384 384v-384h-384z" />
<glyph unicode="" glyph-name="kpi_status_risk" d="M512 960c-282.667 0-512-229.333-512-512s229.333-512 512-512 512 229.333 512 512-229.333 512-512 512zM512 64c-212.053 0-384 171.947-384 384s171.947 384 384 384v-384h384c0-212.053-171.947-384-384-384z" />
<glyph unicode="" glyph-name="spinner2" d="M1024 448c-1.278 66.862-15.784 133.516-42.576 194.462-26.704 61-65.462 116.258-113.042 161.92-47.552 45.696-103.944 81.82-164.984 105.652-61.004 23.924-126.596 35.352-191.398 33.966-64.81-1.282-129.332-15.374-188.334-41.356-59.048-25.896-112.542-63.47-156.734-109.576-44.224-46.082-79.16-100.708-102.186-159.798-23.114-59.062-34.128-122.52-32.746-185.27 1.286-62.76 14.964-125.148 40.134-182.206 25.088-57.1 61.476-108.828 106.11-151.548 44.61-42.754 97.472-76.504 154.614-98.72 57.118-22.304 118.446-32.902 179.142-31.526 60.708 1.29 120.962 14.554 176.076 38.914 55.15 24.282 105.116 59.48 146.366 102.644 41.282 43.14 73.844 94.236 95.254 149.43 13.034 33.458 21.88 68.4 26.542 103.798 1.246-0.072 2.498-0.12 3.762-0.12 35.346 0 64 28.652 64 64 0 1.796-0.094 3.572-0.238 5.332h0.238zM922.306 278.052c-23.472-53.202-57.484-101.4-99.178-141.18-41.67-39.81-91-71.186-144.244-91.79-53.228-20.678-110.29-30.452-166.884-29.082-56.604 1.298-112.596 13.736-163.82 36.474-51.25 22.666-97.684 55.49-135.994 95.712-38.338 40.198-68.528 87.764-88.322 139.058-19.87 51.284-29.228 106.214-27.864 160.756 1.302 54.552 13.328 108.412 35.254 157.69 21.858 49.3 53.498 93.97 92.246 130.81 38.73 36.868 84.53 65.87 133.874 84.856 49.338 19.060 102.136 28.006 154.626 26.644 52.5-1.306 104.228-12.918 151.562-34.034 47.352-21.050 90.256-51.502 125.624-88.782 35.396-37.258 63.21-81.294 81.39-128.688 18.248-47.392 26.782-98.058 25.424-148.496h0.238c-0.144-1.76-0.238-3.536-0.238-5.332 0-33.012 24.992-60.174 57.086-63.624-6.224-34.822-16.53-68.818-30.78-100.992z" />
<glyph unicode="" glyph-name="cog" d="M933.79 349.75c-53.726 93.054-21.416 212.304 72.152 266.488l-100.626 174.292c-28.75-16.854-62.176-26.518-97.846-26.518-107.536 0-194.708 87.746-194.708 195.99h-201.258c0.266-33.41-8.074-67.282-25.958-98.252-53.724-93.056-173.156-124.702-266.862-70.758l-100.624-174.292c28.97-16.472 54.050-40.588 71.886-71.478 53.638-92.908 21.512-211.92-71.708-266.224l100.626-174.292c28.65 16.696 61.916 26.254 97.4 26.254 107.196 0 194.144-87.192 194.7-194.958h201.254c-0.086 33.074 8.272 66.57 25.966 97.218 53.636 92.906 172.776 124.594 266.414 71.012l100.626 174.29c-28.78 16.466-53.692 40.498-71.434 71.228zM512 240.668c-114.508 0-207.336 92.824-207.336 207.334 0 114.508 92.826 207.334 207.336 207.334 114.508 0 207.332-92.826 207.332-207.334-0.002-114.51-92.824-207.334-207.332-207.334z" />
<glyph unicode="" glyph-name="info" d="M448 656c0 26.4 21.6 48 48 48h32c26.4 0 48-21.6 48-48v-32c0-26.4-21.6-48-48-48h-32c-26.4 0-48 21.6-48 48v32zM640 192h-256v64h64v192h-64v64h192v-256h64zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416z" />
<glyph unicode="" glyph-name="arrow-up2" d="M877.254 557.254l-320 320c-24.992 24.994-65.514 24.994-90.508 0l-320-320c-24.994-24.994-24.994-65.516 0-90.51 24.994-24.996 65.516-24.996 90.51 0l210.744 210.746v-613.49c0-35.346 28.654-64 64-64s64 28.654 64 64v613.49l210.746-210.746c12.496-12.496 28.876-18.744 45.254-18.744s32.758 6.248 45.254 18.746c24.994 24.994 24.994 65.514 0 90.508z" />
<glyph unicode="" glyph-name="arrow-up-right2" d="M237.254 82.746l530.746 530.744v-229.49c0-35.346 28.654-64 64-64s64 28.654 64 64v384c0 25.884-15.594 49.222-39.508 59.126-7.924 3.284-16.242 4.84-24.492 4.838v0.036h-384c-35.346 0-64-28.654-64-64 0-35.348 28.654-64 64-64h229.49l-530.744-530.746c-12.498-12.496-18.746-28.876-18.746-45.254s6.248-32.758 18.746-45.254c24.992-24.994 65.516-24.994 90.508 0z" />
<glyph unicode="" glyph-name="arrow-right2" d="M621.254 82.746l320 320c24.994 24.992 24.994 65.516 0 90.51l-320 320c-24.994 24.992-65.516 24.992-90.51 0-24.994-24.994-24.994-65.516 0-90.51l210.746-210.746h-613.49c-35.346 0-64-28.654-64-64s28.654-64 64-64h613.49l-210.746-210.746c-12.496-12.496-18.744-28.876-18.744-45.254s6.248-32.758 18.744-45.254c24.994-24.994 65.516-24.994 90.51 0z" />
<glyph unicode="" glyph-name="arrow-down-right2" d="M146.746 722.746l530.742-530.746h-229.488c-35.346 0-64-28.654-64-64s28.654-64 64-64h384c25.884 0 49.222 15.594 59.126 39.508 3.284 7.924 4.84 16.242 4.838 24.492h0.036v384c0 35.346-28.654 64-64 64-35.348 0-64-28.654-64-64v-229.49l-530.746 530.744c-12.496 12.498-28.874 18.746-45.254 18.746s-32.758-6.248-45.254-18.746c-24.994-24.992-24.994-65.516 0-90.508z" />
<glyph unicode="" glyph-name="arrow-down22" d="M877.254 338.746l-320-320c-24.992-24.994-65.514-24.994-90.508 0l-320 320c-24.994 24.994-24.994 65.516 0 90.51 24.994 24.996 65.516 24.996 90.51 0l210.744-210.746v613.49c0 35.346 28.654 64 64 64s64-28.654 64-64v-613.49l210.746 210.746c12.496 12.496 28.876 18.744 45.254 18.744s32.758-6.248 45.254-18.746c24.994-24.994 24.994-65.514 0-90.508z" />
</font></defs></svg>
Webpack.config
const path = require("path");
const fs = require("fs");
const CopyPlugin = require("copy-webpack-plugin");
// Webpack entry points. Mapping from resulting bundle name to the source file entry.
const entries = {};
// Loop through subfolders in the "SampleProject" folder and add an entry for each one
const SampleProjectDir = path.join(__dirname, "src/SampleProject");
fs.readdirSync(SampleProjectDir).filter(dir => {
if (fs.statSync(path.join(SampleProjectDir, dir)).isDirectory()) {
entries[dir] = "./" + path.relative(process.cwd(), path.join(SampleProjectDir, dir, dir));
}
});
module.exports = {
node: {fs: 'empty'},
externals: [
{'./cptable': 'var cptable'},
{'./jszip': 'jszip'}
],
entry: entries,
output: {
filename: "[name]/[name].js"
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
alias: {
"vss-web-extension-sdk": path.resolve("node_modules/vss-web-extension-sdk"),
},
},
stats: {
warnings: false
},
module: {
rules: [
{
test: /\.(jpg|png)$/,
use: {
loader: "url-loader",
options: {
limit: 25000,
},
},
},
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot-loader/webpack']
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "azure-devops-ui/buildScripts/css-variables-loader", "sass-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.woff$/,
use: [{
loader: 'base64-inline-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
}]
},
{
test: /\.html$/,
loader: "file-loader"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: '10000',
mimetype: 'application/octet-stream'
}
},
{
test: /\.svg$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack#1.x
disable: true, // webpack#2.x and newer
},
},
],
},
],
},
plugins: [
new CopyPlugin ({
patterns: [{ from: "**/*.html", context: "src/SampleProject" }]
})
]
};
Although this is not exactly an answer to your question, it is a solution to your underlying problem:
The extension checker only looks for specific file extensions. That's why I use the webpack file loader to rename the .svg files to something else.
{
test: /\.(svg)(\?\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].svgext"
}
}
]
},
This way you don't have to edit the .css file every time you install/upgrade your packages. And it also works if you integrate more libraries with .svg font files or other .svg images into your extensions.
Actually, that SVG file is just a fallback for the icon font in WebDataRocks.
So, you can simply remove the reference to it from webdatarocks.css. Nothing will break, because CSS will use woff or ttf icons instead.
Here are lines 278-283 in webdatarocks.css:
#font-face {
font-family: "webdatarocks-icons";
src: url("./theme/assets/webdatarocks-icons.woff") format("woff"),
url("./theme/assets/webdatarocks-icons.ttf") format("truetype"),
url("./theme/assets/webdatarocks-icons.svg#webdatarocks-icons") format("svg");
font-weight: normal;
font-style: normal;
}
Simply remove webdatarocks-icons.svg from it as follows:
#font-face {
font-family: "webdatarocks-icons";
src: url("./theme/assets/webdatarocks-icons.woff") format("woff"),
url("./theme/assets/webdatarocks-icons.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
We could use SVG to PNG loader.
You could refer to this sample to convert the .SVG file to .PNG
The following example generates a single 32x32 PNG:
require("svg-to-png-loader?height=32&width=32!img.svg");
The following example generates multiple PNGs at ${output.path}/assets/icon-[height]x[width].png using the sizes option along with a custom name template specified in the name option:
require("svg-to-png-loader?" +
"sizes[]=57," +
"sizes[]=72," +
"sizes[]=76," +
"sizes[]=114," +
"sizes[]=120," +
"sizes[]=144," +
"sizes[]=152," +
"sizes[]=180," +
"sizes[]=192" +
"&name=assets/icon-[height]x[width]-[contenthash].png!./assets/icon.svg");
You can also use the loader in your webpack config. The below example will transform imported svg files with a suffix of .icon.svg (e.g. to distinguish icons from other svgs):
module.exports = {
//...
module: {
rules: [
{
test: /\.icon\.svg$/,
use: [
{
loader: path.resolve('svg-to-png-loader'),
options: {
sizes: ['57x57', ...]
}
}
]
}
]
}
};
I have this svg "code"
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="34">
<path transform="rotate(0 10 17)" fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" />
<path transform="rotate(0 10 17) translate(0 0)" fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" />
</svg>
its a vessel with a arrow inside.
I am trying to rotate this "picture", (i need to rotate it on 360 degree).
When I change rotate(0 10 17) to rotate(90 10 17) it gets cut away. That's because i don't rotate it from the center of the image.
I tried using this formula to calculate the center but i couldn't manage to do it myself
x = 34; y = 20; o = 4.71238898 //(degrees to radiants) ;
a = Math.abs(x * Math.sin(o)) + Math.abs(y * Math.cos(o));
b = Math.abs(x * Math.cos(o)) + Math.abs(y * Math.sin(o));
I am really bad with those math/svg problems, i am hoping someone can assist me.
Thanks
The centre of rotation is correct. But the trouble is now that it is rotated, your graphic isn't 20x34 any longer, it is 34x20.
So the first thing you have to do is update the width and height.
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20">
That's not the final solution of course, because the centre of this new 34x20 SVG is in a different place to the centre of the old 20x34 one. One solution would be to work out a different centre of rotation that would work so that the graphic rotated around into the right position in the new rectangle.
That's a bit tricky. Luckily there is a much simpler way. We can just add a viewBox to the SVG to tell the browser the dimensions of the area that the rotated symbol occupies. The browser will reposition it for us.
The four values in a viewBox attribute are:
<leftX> <topY> <width> <height>
We already know the width and height (34 and 20), so we just need to work out the left and top coords. Those are obviously just the centre-of-rotation less half the width and height respectively.
leftX = 10 - (newWidth / 2)
= 10 - 17
= -7
topY = 17 - (newHeight / 2)
= 17 - 10
= 7
So the viewBox attribute needs to be "-7 7 34 20".
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20" viewBox="-7 7 34 20">
<path transform="rotate(90 10 17)" fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" />
<path transform="rotate(90 10 17) translate(0 0)" fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" />
</svg>
Update
If you need to do arbitrary angles, then there is a better method, using Javascript.
Apply the transform to the paths
Call getBBox() on the SVG to get the dimensions of its content.
Use those values to update the viewBox and the width and 'height`
var angle = 145; // degrees
var mysvg = document.getElementById("mysvg");
var paths = mysvg.getElementsByTagName("path");
// Apply a transform attribute to each path
for (var i=0; i<paths.length; i++) {
paths[i].setAttribute("transform", "rotate("+angle+",10,17)");
}
// Now that the paths have been rotated, get the bounding box
// of the SVG contents
var bbox = mysvg.getBBox();
// Update the viewBox from the bounds
mysvg.setAttribute("viewBox", bbox.x + " " + bbox.y + " " +
bbox.width +" "+ bbox.height);
// Update the width and height
mysvg.setAttribute("width", bbox.width + "px");
mysvg.setAttribute("height", bbox.height + "px");
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="20" height="34">
<path fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" />
<path fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" />
</svg>