feat(tinytag): replace svg to render

src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap

@@ -5,7 +5,36 @@ exports[`test StatusTag should match snapshot 1`] = `
   <span
     class="dtc-tinyTag dtc-test"
   >
-    完成
+    <svg
+      fill="none"
+      height="16"
+      viewBox="0 0 9 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        height="14"
+        rx="1.5"
+        stroke="#1D78FF"
+        stroke-linejoin="bevel"
+        width="8"
+        x="0.5"
+        y="1"
+      />
+      <text
+        fill="#1D78FF"
+        font-family="PingFang SC"
+        font-size="10"
+        letter-spacing="0px"
+        xml:space="preserve"
+      >
+        <tspan
+          x="4"
+          y="11.6"
+        >
+          完成
+        </tspan>
+      </text>
+    </svg>
   </span>
 </DocumentFragment>
 `;

src/tinyTag/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 
 import './style.scss';
@@ -8,14 +8,56 @@ interface ITinyTag extends React.HTMLAttributes<HTMLSpanElement> {
     color?: string;
 }
 
-export default function TinyTag({ color, value, className, ...restProps }: ITinyTag) {
+const DEFAULT_COLOR = '#1D78FF';
+
+export default function TinyTag({
+    color = DEFAULT_COLOR,
+    value,
+    className,
+    ...restProps
+}: ITinyTag) {
+    const domRef = useRef<HTMLDivElement>(null);
+    const [width, setWidth] = useState(0);
+
+    const getTextWidth = () => {
+        const text = domRef?.current?.getElementsByTagName('text')?.[0];
+        const paddingWidth = 9;
+        if (!text) return;
+        const widthSvg = text.getBoundingClientRect()?.width + paddingWidth;
+        setWidth(widthSvg);
+    };
+    useEffect(() => {
+        getTextWidth();
+    }, []);
     return (
-        <span
-            className={classNames('dtc-tinyTag', className)}
-            style={{ borderColor: color, color }}
-            {...restProps}
-        >
-            {value}
+        <span ref={domRef} className={classNames('dtc-tinyTag', className)} {...restProps}>
+            <svg
+                height="16"
+                viewBox={`0 0 ${width} 16`}
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <rect
+                    x="0.5"
+                    y="1"
+                    width={width - 1}
+                    height="14"
+                    rx="1.5"
+                    stroke={color}
+                    strokeLinejoin="bevel"
+                />
+                <text
+                    fill={color}
+                    xmlSpace="preserve"
+                    fontFamily="PingFang SC"
+                    fontSize="10"
+                    letterSpacing="0px"
+                >
+                    <tspan x="4" y="11.6">
+                        {value}
+                    </tspan>
+                </text>
+            </svg>
         </span>
     );
 }

src/tinyTag/style.scss

@@ -1,16 +1,5 @@
-$primaryColor: #1D78FF;
-$factor: 0.83;
-
 .dtc-tinyTag {
-    border-radius: 2px;
-    border: 1px solid $primaryColor;
-    font-weight: 400;
-    color: $primaryColor;
-    line-height: calc(15px / $factor);
-    padding: 0 calc(4px / $factor);
-    font-size: 12px;
-    display: inline-block;
-    transform: scale($factor);
     user-select: none;
-    white-space: nowrap;
+    display: inline-block;
+    transform: translateY(3px);
 }