vue/react使用vite插件将png图片转换为svg格式

在前端开发中，为适应各种需求，很多情况下都需要将icon图标进行转换以满足需求。将png转为iconfont是一种比较好的方法。本文介绍一款自动直接将png图片转为svg格式的vite插件，可在vue和react框架中使用。

npm add vite-plugin-png-to-svg --save-dev

使用配置：

// vite.config
import {defineConfig} from 'vite'
import pngToSvg from 'vite-plugin-png-to-svg'

export default defineConfig({
  plugins: [
    pngToSvg({
      //　所有参数为可选
      pngPath: "/src/assets/png", // png图片位置，默认/src/assets/png
      svgPath: "/src/assets/svg", // 生成的svg保存位置，默认/src/assets/svg
      isReplace: false, // 替换指定文件内容中的png图片，默认false
      include: ['vue', 'tsx'], // 指定文件后缀，默认['vue','tsx']。isReplace=true时有效
      replaceType: 'img' // 替换模式，img/svg两种。默认img。isReplace=true时有效
    })
  ]
})

使用方法：

方法1.将需要转换的png图片保存至pngPath配置目录下，如/src/assets/png。在dev或build模式下会自动将目录下的png转换为svg并保存在指定位置。最后在页面中引用即可。

方法2.设置isReplace为true，同时将需转换的img添加data-src="svg"标识，即可自动将指定后缀文件内容中的png图片替换为svg内容。

<div>
    <img src="../assets/29.png" data-src="svg">
</div>
<!--当replaceType模式为img时，将转换为以下内容-->
<div>
    <img src="/src/assets/svg/29.svg" data-src="svg">
</div>
<!--当replaceType模式为svg时，将转换为以下内容-->
<div>
    <svg xmlns="http://www.w3.org/2000/svg" width="416" height="419" viewBox="0 0 416 419" version="1.1"><path d="M 345.832 5.056 C 340.804 10.342, 324.939 34.463, 317.115 48.718 C 294.722 89.516, 279.318 138.536, 274.604 184 C 272.297 206.254, 271.581 226.201, 272.943 230.327 C 275.236 237.276, 283.785 239.369, 288.917 234.237 L 291.680 231.474 292.292 212.487 C 293.161 185.547, 295.981 165.740, 302.684 139.500 C 312.870 99.627, 331.755 58.143, 353.743 27.341 C 363.567 13.578, 364.410 11.773, 363.003 7.509 C 361.529 3.042, 358.586 1, 353.623 1 C 350.327 1, 349.066 1.656, 345.832 5.056 M 399.355 21.371 C 396.626 23.718, 396.585 23.936, 395.332 42.621 C 393.912 63.780, 392.155 77.423, 388.398 96.450 C 379.372 142.152, 362.014 187.345, 338.253 227 C 330.311 240.255, 315.997 260.967, 314.765 260.988 C 314.361 260.994, 311.886 259.687, 309.265 258.083 C 298.259 251.345, 284.284 248.808, 272.235 251.360 C 252.350 255.571, 237.033 272.068, 232.646 294 C 231.727 298.590, 230.904 310.618, 230.525 325 C 229.167 376.452, 226.651 391.304, 217.778 400.223 C 213.526 404.497, 213 405.511, 213 409.424 C 213 413.108, 213.500 414.243, 216.077 416.411 C 217.973 418.007, 220.371 419, 222.327 418.999 C 228.035 418.998, 264.255 397.047, 286.494 380.111 C 298.130 371.250, 317.865 352.054, 323.928 343.700 C 342.162 318.574, 344.296 297.529, 330.699 276.925 C 329.022 274.384, 329.060 274.273, 333.645 268.425 C 347.747 250.441, 366.130 219.064, 377.666 193.289 C 399.754 143.936, 411.809 94.983, 414.920 42 C 415.840 26.343, 415.129 22.210, 411.150 20.080 C 407.667 18.216, 402.345 18.799, 399.355 21.371 M 196 44.603 C 183.836 47.858, 172.848 57.434, 166.519 70.295 C 161.489 80.518, 160.048 88.695, 159.961 107.500 C 159.917 117.082, 159.408 124.899, 158.694 126.988 C 157.145 131.515, 153.595 133.165, 145.169 133.272 C 135.329 133.398, 130.279 130.778, 121.034 120.749 C 96.321 93.943, 90.759 90.118, 75.277 89.273 C 50.326 87.913, 31.044 100.944, 16.584 128.942 C -1.487 163.930, -4.675 212.222, 8.486 251.583 C 15.719 273.215, 26.474 290.519, 42.970 307.063 C 63.669 327.821, 86.592 340.275, 118.442 348.063 C 140.371 353.426, 150.627 354.452, 182.543 354.477 C 214.646 354.502, 215.360 354.374, 217.960 348.097 C 219.544 344.273, 218.662 340.571, 215.386 337.295 L 212.854 334.763 195.677 335.461 C 169.217 336.538, 144.758 334.220, 121.973 328.479 C 68.573 315.023, 32.470 278.477, 22.443 227.727 C 20.200 216.377, 19.451 193.403, 20.938 181.589 C 24.109 156.396, 33.304 133.991, 45.951 120.643 C 52.223 114.023, 57.906 110.770, 66.185 109.059 C 77.732 106.674, 83.637 109.461, 96.154 123.205 C 109.736 138.119, 113.567 141.764, 120.095 145.983 C 128.444 151.379, 136.792 153.417, 147.720 152.726 C 162.992 151.760, 170.641 147.521, 175.674 137.234 C 178.371 131.721, 178.498 130.765, 179.100 111.504 C 179.913 85.476, 182.151 77.614, 191.033 69.589 C 196.591 64.568, 201.234 62.757, 208.564 62.753 C 224.042 62.745, 243.135 72.886, 266.925 93.750 C 275.463 101.238, 279.193 101.961, 284.077 97.077 C 288.687 92.467, 288.172 88.170, 282.250 81.825 C 272.022 70.868, 252.573 56.907, 238.438 50.376 C 223.372 43.415, 208.170 41.347, 196 44.603 M 217.475 114.060 C 215.811 114.545, 212.915 116.524, 211.040 118.459 C 208.103 121.489, 207.569 122.805, 207.198 127.933 C 206.666 135.300, 209.178 140.030, 215.277 143.141 C 225.573 148.394, 238 140.660, 238 129 C 238 122.932, 234.935 118.233, 229.030 115.250 C 224.296 112.858, 222.310 112.654, 217.475 114.060 M 56.500 179.968 C 50.892 182.883, 48.671 186.362, 48.211 192.955 C 47.781 199.108, 49.883 203.379, 55.326 207.408 C 59.181 210.261, 67.862 210.233, 71.747 207.355 C 81.405 200.201, 81.460 187.838, 71.864 180.732 C 67.893 177.791, 61.318 177.464, 56.500 179.968 M 81.990 244.250 C 77.053 247.610, 74.769 251.300, 74.299 256.676 C 73.045 271.017, 90.220 278.964, 100.641 268.863 C 110.969 258.853, 103.820 242, 89.247 242 C 86.796 242, 84.041 242.854, 81.990 244.250 M 270.398 272.333 C 264.461 275.170, 258.810 280.490, 256.117 285.777 C 251.541 294.762, 250.896 299.384, 249.950 330 C 249.117 356.987, 247.795 375.735, 246.293 381.899 C 245.598 384.749, 244.942 385.072, 258.500 375.895 C 298.263 348.981, 321.413 321.010, 319.717 301.928 C 319.040 294.312, 316.298 289.444, 308.661 282.300 C 299.804 274.015, 292.901 270.762, 283.139 270.276 C 276.618 269.950, 274.753 270.251, 270.398 272.333 M 148.450 274.407 C 138.734 278.639, 136.053 291.672, 143.314 299.372 C 151.827 308.398, 166.826 304.789, 170.014 292.947 C 173.434 280.247, 160.525 269.147, 148.450 274.407" stroke="none" fill="black" fill-rule="evenodd"></path></svg>
</div>

github源码：https://github.com/337547038/vite-plugin-png-to-svg