расширения azure-devops не принимают SVG-файлы

#svg #webpack #azure-devops-extensions #webdatarocks #svgtopng

#svg #webpack #azure-devops-extensions #webdatarocks #svgtopng

Вопрос:

Я использую инструмент сводной таблицы (webdatarocks) в azure DevOps extension проекте. Значки инструментов в файле SVG, но azure DevOps extensions проекты не принимают типы файлов SVG и выдает следующую ошибку на этапе публикации.

Обработка ошибок … Типы файлов SVG в пакете расширения не поддерживаются. Файл в / dist *****.svg’ имеет тип SVG, пожалуйста, преобразуйте его в другой формат (например, PNG или JPG) и повторите попытку.

Каким путем мне следует идти? Я попытался использовать некоторые пакеты npm в webpack для преобразования SVG в PNG или JPEG, но мне это не удалось.

Файл 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="amp;#x20;" horiz-adv-x="512" d="" />
<glyph unicode="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#xe90e;" glyph-name="act_filter" d="M844.8 806.4h-665.6l256-358.4v-358.4l153.6 153.6v204.8z" />
<glyph unicode="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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="amp;#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" }]
        })
    ]
};
 

Комментарии:

1. Просто проверяю, не блокирует ли вас эта проблема сейчас? Какие-либо обновления для этой проблемы?

2. На самом деле эта проблема все еще находится на столе, и я попытался использовать пакет (загрузчик SVG в PNG), который предлагается в ответе, но я столкнулся с некоторыми другими проблемами. В конце я переместил другую часть разработки. Я, вероятно, вернусь к этому через неделю

3. Привет, не стесняйтесь, дайте мне знать, если у вас возникнут какие-либо вопросы. Если ответ может помочь, вы можете рассмотреть возможность его принятия. Хорошего дня. 🙂

Ответ №1:

Хотя это не совсем ответ на ваш вопрос, это решение вашей основной проблемы:

Средство проверки расширений ищет только определенные расширения файлов. Вот почему я использую загрузчик файлов webpack для переименования файлов .svg во что-то другое.

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

Таким образом, вам не нужно редактировать файл .css каждый раз при установке / обновлении пакетов. И это также работает, если вы интегрируете в свои расширения больше библиотек с файлами шрифтов .svg или другими изображениями .svg.

Ответ №2:

На самом деле, этот файл SVG — это просто запасной вариант для шрифта значка в WebDataRocks. Таким образом, вы можете просто удалить ссылку на него из webdatarocks.css . Ничего не сломается, потому что вместо CSS будут использоваться woff ttf значки или.

Вот строки 278-283 в 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;
}
 

Просто удалите webdatarocks-icons.svg из него следующим образом:

 @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;
}
 

Комментарии:

1. Ян, спасибо за ваше предложение, я попробовал и заставил его работать. Но принятый ответ решил проблему без изменения кода пакета.

Ответ №3:

Мы могли бы использовать загрузчик SVG в PNG.

Вы можете обратиться к этому образцу для преобразования .SVG-файл в формате .PNG

В следующем примере создается один файл формата PNG размером 32×32:

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

В следующем примере при ${output.path}/assets/icon-[height]x[width].png использовании опции создается несколько PNG sizes -файлов вместе с пользовательским шаблоном имени, указанным в name опции:

 require("svg-to-png-loader?"  
    "sizes[]=57,"  
    "sizes[]=72,"  
    "sizes[]=76,"  
    "sizes[]=114,"  
    "sizes[]=120,"  
    "sizes[]=144,"  
    "sizes[]=152,"  
    "sizes[]=180,"  
    "sizes[]=192"  
    "amp;name=assets/icon-[height]x[width]-[contenthash].png!./assets/icon.svg");
 

Вы также можете использовать загрузчик в своей конфигурации webpack. Приведенный ниже пример преобразует импортированные файлы svg с помощью суффикса .icon.svg (например, для отличия значков от других svg):

 module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.icon.svg$/,
        use: [
          {
            loader: path.resolve('svg-to-png-loader'),
            options: {
              sizes: ['57x57', ...]
            }
          }
        ]
      }
    ]
  }
};