azure-devops 扩展不接受 SVG 文件
azure-devops extensions do not accept SVG files
我在 azure DevOps extension 项目中使用枢轴 table 工具 (webdatarocks)。 SVG 文件中的工具图标，但 azure DevOps extensions 项目不接受 SVG 文件类型，并在发布阶段出现以下错误。
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.
我应该走哪条路？我尝试在 webpack 中使用一些 npm 包，将 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=" " 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" }]
})
]
};
我们可以使用 SVG to PNG loader.
您可以参考此示例将 .SVG 文件转换为 .PNG
以下示例生成单个 32x32 PNG：
require("svg-to-png-loader?height=32&width=32!img.svg");
以下示例使用 sizes 选项以及在 name 选项中指定的自定义名称模板在 ${output.path}/assets/icon-[height]x[width].png 生成多个 PNG：
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");
您还可以在 webpack 配置中使用加载器。下面的示例将转换后缀为 .icon.svg 的导入 svg 文件（例如，将图标与其他 svg 区分开来）：
module.exports = {
//...
module: {
rules: [
{
test: /\.icon\.svg$/,
use: [
{
loader: path.resolve('svg-to-png-loader'),
options: {
sizes: ['57x57', ...]
}
}
]
}
]
}
};
实际上，该 SVG 文件只是 WebDataRocks 中图标字体的后备。
因此，您可以简单地从 webdatarocks.css 中删除对它的引用。什么都不会中断，因为 CSS 将使用 woff 或 ttf 图标代替。
这是 webdatarocks.css 中的第 278-283 行：
@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;
}
虽然这不是您问题的确切答案，但它是您潜在问题的解决方案：
扩展名检查器只查找特定的文件扩展名。这就是我使用 webpack 文件加载器将 .svg 文件重命名为其他名称的原因。
{
test: /\.(svg)(\?\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].svgext"
}
}
]
},
这样您就不必在每次 install/upgrade 您的包时都编辑 .css 文件。如果您将更多库与 .svg 字体文件或其他 .svg 图像集成到您的扩展中，它也可以工作。
我在 azure DevOps extension 项目中使用枢轴 table 工具 (webdatarocks)。 SVG 文件中的工具图标，但 azure DevOps extensions 项目不接受 SVG 文件类型，并在发布阶段出现以下错误。
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.
我应该走哪条路？我尝试在 webpack 中使用一些 npm 包，将 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=" " 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" }]
})
]
};
我们可以使用 SVG to PNG loader.
您可以参考此示例将 .SVG 文件转换为 .PNG
以下示例生成单个 32x32 PNG：
require("svg-to-png-loader?height=32&width=32!img.svg");
以下示例使用 sizes 选项以及在 name 选项中指定的自定义名称模板在 ${output.path}/assets/icon-[height]x[width].png 生成多个 PNG：
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");
您还可以在 webpack 配置中使用加载器。下面的示例将转换后缀为 .icon.svg 的导入 svg 文件（例如，将图标与其他 svg 区分开来）：
module.exports = {
//...
module: {
rules: [
{
test: /\.icon\.svg$/,
use: [
{
loader: path.resolve('svg-to-png-loader'),
options: {
sizes: ['57x57', ...]
}
}
]
}
]
}
};
实际上，该 SVG 文件只是 WebDataRocks 中图标字体的后备。
因此，您可以简单地从 webdatarocks.css 中删除对它的引用。什么都不会中断，因为 CSS 将使用 woff 或 ttf 图标代替。
这是 webdatarocks.css 中的第 278-283 行：
@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;
}
虽然这不是您问题的确切答案，但它是您潜在问题的解决方案：
扩展名检查器只查找特定的文件扩展名。这就是我使用 webpack 文件加载器将 .svg 文件重命名为其他名称的原因。
{
test: /\.(svg)(\?\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].svgext"
}
}
]
},
这样您就不必在每次 install/upgrade 您的包时都编辑 .css 文件。如果您将更多库与 .svg 字体文件或其他 .svg 图像集成到您的扩展中，它也可以工作。