react发布npm组件库时，组件库的图片在其他项目里无法加载我们发布的npm包在其他项目里静态资源图片无法加载，检查

我们发布的npm包在其他项目里静态资源图片无法加载，检查发现是资源路径不匹配，它去了其项目的静态资源里找图片，这当然是找不到的，我们包的图片是在包的dist文件下。

于是去网上查资料，搜索到的方法都不太完美，所以我想到了使用svg去替代图片。

import React,{CSSProperties} from "react";


const SuccessIcon: React.FC<{ style: CSSProperties }>  = ({style}) =>
   (
      <svg version="1.1" style={style} viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" width="256" height="256">
         <path d="M0 0 C2.44 2.19 2.44 2.19 4 5 C3.83 10.93 2.23 13.52 -1.92 17.65 C-2.44 18.17 -2.96 18.7 -3.49 19.24 C-5.22 20.98 -6.97 22.7 -8.72 24.42 C-9.97 25.67 -11.22 26.92 -12.46 28.17 C-15.84 31.56 -19.24 34.92 -22.65 38.29 C-26.21 41.81 -29.75 45.35 -33.29 48.89 C-39.24 54.83 -45.2 60.76 -51.17 66.68 C-59.59 75.03 -67.99 83.4 -76.39 91.78 C-82.91 98.28 -89.44 104.78 -95.96 111.27 C-97.01 112.32 -97.01 112.32 -98.08 113.38 C-102.11 117.39 -106.13 121.39 -110.17 125.39 C-111.39 126.6 -112.61 127.81 -113.83 129.03 C-115.49 130.68 -117.16 132.33 -118.82 133.99 C-119.76 134.91 -120.69 135.84 -121.65 136.79 C-124.75 139.71 -126.41 140.92 -130.69 141.5 C-140.42 141.16 -148.4 129.89 -154.87 123.4 C-155.99 122.27 -157.12 121.15 -158.25 120.02 C-160.6 117.68 -162.94 115.33 -165.28 112.98 C-168.28 109.97 -171.29 106.97 -174.3 103.97 C-176.62 101.65 -178.94 99.33 -181.26 97.01 C-182.37 95.9 -183.48 94.79 -184.59 93.68 C-186.14 92.14 -187.68 90.59 -189.22 89.04 C-190.1 88.16 -190.97 87.28 -191.88 86.38 C-194.65 83.27 -196.03 81.38 -195.94 77.19 C-194.37 71.87 -191.6 68.07 -187 65 C-179.82 63.78 -175.58 67.37 -169.98 71.31 C-169.04 71.95 -168.1 72.59 -167.13 73.25 C-164.14 75.3 -161.16 77.37 -158.19 79.44 C-156.17 80.83 -154.14 82.22 -152.12 83.6 C-149.28 85.55 -146.44 87.5 -143.6 89.47 C-142.35 90.34 -142.35 90.34 -141.06 91.22 C-140.32 91.74 -139.59 92.25 -138.83 92.78 C-135.09 95.28 -132.52 95.44 -128 95 C-125.68 93.46 -123.92 92.08 -121.94 90.19 C-120.8 89.17 -119.67 88.15 -118.53 87.14 C-117.95 86.61 -117.37 86.09 -116.77 85.55 C-113.94 83.07 -110.98 80.79 -108 78.5 C-103.41 74.93 -98.92 71.28 -94.5 67.5 C-89.6 63.31 -84.6 59.29 -79.51 55.34 C-74.77 51.64 -70.13 47.84 -65.5 44 C-60.31 39.7 -55.08 35.45 -49.75 31.31 C-44.6 27.3 -39.58 23.16 -34.62 18.92 C-30.61 15.5 -26.55 12.18 -22.42 8.92 C-20.7 7.55 -18.99 6.17 -17.3 4.77 C-16.42 4.04 -15.53 3.31 -14.62 2.56 C-13.83 1.9 -13.04 1.25 -12.23 0.57 C-7.78 -2.56 -4.91 -2.25 0 0 Z " fill="#FFFFFF" transform="translate(224,51)"/>
      </svg>

   )

export default  SuccessIcon

我们将svg写为react组件，再以组件形式在代码里使用。这样就解决了图片不加载问题。

这里推荐一个图片转svg的网站，它可以将图片文件转为svg代码，把svg下载下来并使用记事本打开，就可以拿到svg代码了。

ezgif.com/png-to-svg

而且，svg有不错的优势：

可缩放性： SVG 是基于矢量的图形格式，因此可以无限缩放而不会失真。这意味着无论放大还是缩小，图像始终保持清晰和锐利，适应不同大小和分辨率的设备。
文本可检索和编辑性： SVG 内部的文本和图形元素是可编辑和可检索的。这使得对图形进行动态修改和交互成为可能，例如通过 JavaScript 或 CSS 控制 SVG 的属性和行为。
小文件大小： SVG 文件通常比基于位图的格式（如 JPEG、PNG）更小，尤其是对于简单的图形和图标。这减少了页面加载时间，特别是在移动设备和低带宽网络条件下尤为显著。
动画和互动性： SVG 支持基于标记的动画（SMIL 动画）和基于 JavaScript 的动态交互。这使得开发人员可以创建复杂的、响应用户操作的动画效果，而无需依赖外部插件或工具。
平台无关性： SVG 是一种开放标准，几乎所有现代浏览器都支持它，包括移动设备的浏览器。这种广泛的支持确保了跨平台和跨设备的一致性和可靠性。
样式控制： SVG 可以与 CSS 直接集成，这意味着可以使用 CSS 控制 SVG 的样式，如填充颜色、边框、阴影等。这种集成性极大地增强了开发者对图形外观和行为的控制能力。
交互性能： 在性能方面，SVG 通常比同等复杂度的 DOM 和 JavaScript 处理更高效，尤其是在大量图形或动画元素需要同时处理时。

最后，愿意给博主的组件库点start去 github.com/lhw123-max/… 谢谢啦