Saya menggunakan alat tabel pivot (webdatarocks) dalam proyek azure DevOps extension. Ikon alat dalam file SVG, tetapi proyek azure DevOps extensions tidak menerima jenis file SVG dan memberikan kesalahan berikut dalam tahap penerbitan.

Pemrosesan kesalahan ... Jenis file SVG dalam paket ekstensi tidak didukung. File di '/dist *****.svg' bertipe SVG, harap ubah ke format lain (seperti PNG atau JPG) dan coba lagi.

Cara mana yang harus saya tempuh? Saya mencoba menggunakan beberapa paket npm di webpack, untuk mengonversi SVG ke PNG atau JPEG tetapi saya gagal.

File SVG

<?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="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" 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="&#xe901;" 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="&#xe902;" 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="&#xe903;" 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="&#xe904;" 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="&#xe907;" 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="&#xe908;" 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="&#xe909;" 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="&#xe90a;" 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="&#xe90e;" glyph-name="act_filter" d="M844.8 806.4h-665.6l256-358.4v-358.4l153.6 153.6v204.8z" />
<glyph unicode="&#xe90f;" 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="&#xe910;" 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="&#xe913;" 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="&#xe914;" 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="&#xe915;" 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="&#xe948;" 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="&#xe949;" 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="&#xe94e;" 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="&#xe950;" 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="&#xe951;" 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="&#xe952;" 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="&#xe953;" 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="&#xe954;" 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="&#xe97b;" 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="&#xe994;" 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="&#xea0c;" 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="&#xea3a;" 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="&#xea3b;" 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="&#xea3c;" 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="&#xea3d;" 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="&#xea3e;" 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" }]
        })
    ]
};
0
husnu 24 Desember 2020, 00:35

3 jawaban

Jawaban Terbaik

Meskipun ini bukan jawaban yang tepat untuk pertanyaan Anda, ini adalah solusi untuk masalah mendasar Anda:

Pemeriksa ekstensi hanya mencari ekstensi file tertentu. Itu sebabnya saya menggunakan pemuat file webpack untuk mengganti nama file .svg menjadi sesuatu yang lain.

   {
        test: /\.(svg)(\?\d+)?$/,
        use: [
            {
                loader: "file-loader",
                options: {
                    name: "[name].svgext"
                }
            }
        ]
    },

Dengan cara ini Anda tidak perlu mengedit file .css setiap kali Anda menginstal/mengupgrade paket Anda. Dan itu juga berfungsi jika Anda mengintegrasikan lebih banyak perpustakaan dengan file font .svg atau gambar .svg lainnya ke dalam ekstensi Anda.

4
Flex 6 Januari 2021, 08:59

Sebenarnya, file SVG itu hanyalah cadangan untuk font ikon di WebDataRocks. Jadi, Anda cukup menghapus referensinya dari webdatarocks.css. Tidak ada yang akan rusak, karena CSS akan menggunakan ikon woff atau ttf.

Berikut adalah baris 278-283 di 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;
}

Cukup hapus webdatarocks-icons.svg darinya sebagai berikut:

@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;
}
4
Ian Sadovy 31 Desember 2020, 09:59

Kita bisa menggunakan SVG ke PNG loader.

Anda dapat merujuk ke contoh ini untuk mengonversi file .SVG ke .PNG

Contoh berikut menghasilkan satu PNG 32x32:

require("svg-to-png-loader?height=32&width=32!img.svg");

Contoh berikut menghasilkan beberapa PNG di ${output.path}/assets/icon-[height]x[width].png menggunakan opsi sizes bersama dengan templat nama khusus yang ditentukan dalam opsi name:

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");

Anda juga dapat menggunakan loader di konfigurasi webpack Anda. Contoh di bawah ini akan mengubah file svg yang diimpor dengan akhiran .icon.svg (misalnya untuk membedakan ikon dari svg lainnya):

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.icon\.svg$/,
        use: [
          {
            loader: path.resolve('svg-to-png-loader'),
            options: {
              sizes: ['57x57', ...]
            }
          }
        ]
      }
    ]
  }
};
0
Vito Liu 24 Desember 2020, 09:38