请教svg在项目中的使用

Question

React中 svg图片的使用

 <Svg viewBox="0 0 23 22" {...props}>
      <path d="M21.5 1l-20 20" strokeWidth={2} stroke="currentColor" strokeLinecap="round" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.033 19H19.5a1 1 0 100-2H9.033l-2 2zm3-3H18.5a1 1 0 001-1V6.533l-2 2V14h-2v-3.467l-2 2V14h-1.467l-2 2zm.936-8H10.5a1 1 0 00-1 1v.469L10.969 8zm-2 2L5.5 13.469V11a1 1 0 011-1h2.469zM4.5 14.469l-2 2V6a1 1 0 012 0v8.469z"
      />
    </Svg>

这个大写的svg是别人封装了一层，可以接受参数
想请教da-Lao们，path里面的d怎么使用？
比如现有svg格式的图片，怎么在项目中使用，类似上面的 path d='' ''

Answer 1

SVG 参考手册 | 菜鸟教程 SVG 参考手册 SVG 元素 元素 说明 属性 <a> 创建一个SVG元素周围链接 xlink:show xlink:actuate xlink:href target <altGlyph> 允许对象性文字进行控制，来呈现特殊的字符数据 x y dx dy .. https://www.runoob.com/svg/svg-reference.html

html的svg路径,svg path路径的介绍已经使用，看完就能灵活使用svg path路径_蓝狍的博客-CSDN博客 svg path的指令path的指令有：M = moveto(X,Y) ：将画笔移动到指定的坐标位置L = lineto(X,Y) ：画直线到指定的坐标位置H = horizontal lineto(X)：画水平线到指定的X坐标位置V = vertical lineto(Y)：画垂直线到指定的Y坐标位置C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三次次贝赛曲线S = sm... https://blog.csdn.net/weixin_31655087/article/details/117980028