chore: extract createSvgComponent

magicdawn · Dec 27, 2024 · e174c74 · e174c74
1 parent d83ea86
commit e174c74
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 46 deletions.
diff --git a/src/modules/icon/index.tsx b/src/modules/icon/index.tsx
@@ -1,4 +1,5 @@
 import IconCuidaShuffleOutline from '~icons/cuida/shuffle-outline' // 这个不能自动 import 不知为何
+import { createSvgComponent } from './util'
 
 export const IconForDislike = IconPhThumbsDownDuotone
 export const IconForConfig = IconParkOutlineConfig
@@ -46,17 +47,9 @@ export function IconForLive({
   }
 }
 
-export function IconForWatchlater(props: ComponentProps<'svg'>) {
+export const IconForWatchlater = createSvgComponent((props) => {
   return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      viewBox='0 0 20 20'
-      width='20'
-      height='20'
-      fill='currentColor'
-      {...props}
-    >
+    <svg viewBox='0 0 20 20' width='20' height='20' fill='currentColor' {...props}>
       <path
         className='circle'
         d='M10 3.1248000000000005C6.20305 3.1248000000000005 3.1250083333333336 6.202841666666667 3.1250083333333336 9.999833333333335C3.1250083333333336 13.796750000000001 6.20305 16.874833333333335 10 16.874833333333335C11.898291666666667 16.874833333333335 13.615833333333333 16.106291666666667 14.860625 14.861916666666666C15.104708333333335 14.617916666666666 15.500416666666668 14.617958333333334 15.7445 14.862041666666668C15.9885 15.106166666666669 15.988416666666668 15.501916666666666 15.744333333333334 15.745958333333334C14.274750000000001 17.215041666666668 12.243041666666667 18.124833333333335 10 18.124833333333335C5.512691666666667 18.124833333333335 1.8750083333333334 14.487125 1.8750083333333334 9.999833333333335C1.8750083333333334 5.512483333333334 5.512691666666667 1.8748000000000002 10 1.8748000000000002C14.487291666666668 1.8748000000000002 18.125 5.512483333333334 18.125 9.999833333333335C18.125 10.304458333333333 18.108208333333334 10.605458333333333 18.075458333333337 10.901791666666668C18.0375 11.244916666666667 17.728625 11.492291666666667 17.385583333333333 11.454333333333334C17.0425 11.416416666666667 16.795083333333334 11.107541666666668 16.833000000000002 10.764458333333334C16.860750000000003 10.513625000000001 16.875 10.2585 16.875 9.999833333333335C16.875 6.202841666666667 13.796958333333333 3.1248000000000005 10 3.1248000000000005z'
@@ -72,7 +65,7 @@ export function IconForWatchlater(props: ComponentProps<'svg'>) {
       />
     </svg>
   )
-}
+})
 
 export const clsIconTextWrapper = 'inline-flex items-center justify-center line-height-[0]'
 

diff --git a/src/modules/icon/stat-icons.tsx b/src/modules/icon/stat-icons.tsx
@@ -1,16 +1,8 @@
-import type { ComponentProps } from 'react'
+import { createSvgComponent } from './util'
 
-export function IconForStatPlay(props: ComponentProps<'svg'>) {
+export const IconForStatPlay = createSvgComponent((props) => {
   return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      viewBox='0 0 24 24'
-      width='24'
-      height='24'
-      fill='#fff'
-      {...props}
-    >
+    <svg viewBox='0 0 24 24' width='24' height='24' fill='#fff' {...props}>
       <path
         d='M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z'
         fill='currentColor'
@@ -21,20 +13,11 @@ export function IconForStatPlay(props: ComponentProps<'svg'>) {
       />
     </svg>
   )
-}
+})
 
-export function IconForStatDanmaku(props: ComponentProps<'svg'>) {
+export const IconForStatDanmaku = createSvgComponent((props) => {
   return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      viewBox='0 0 24 24'
-      width='24'
-      height='24'
-      fill='#ffffff'
-      className='bili-video-card__stats--icon'
-      {...props}
-    >
+    <svg viewBox='0 0 24 24' width='24' height='24' fill='#ffffff' {...props}>
       <path
         d='M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z'
         fill='currentColor'
@@ -57,20 +40,11 @@ export function IconForStatDanmaku(props: ComponentProps<'svg'>) {
       />
     </svg>
   )
-}
+})
 
-export const IconForRoll = forwardRef<SVGSVGElement, ComponentProps<'svg'>>(function (props, ref) {
+export const IconForRoll = createSvgComponent(function (props) {
   return (
-    <svg
-      ref={ref}
-      xmlns='http://www.w3.org/2000/svg'
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      viewBox='0 0 16 16'
-      width='16'
-      height='16'
-      fill='currentColor'
-      {...props}
-    >
+    <svg viewBox='0 0 16 16' width='16' height='16' fill='currentColor' {...props}>
       <path
         d='M8.624933333333333 13.666666666666666C8.624933333333333 14.011849999999999 8.345125 14.291666666666666 7.999933333333333 14.291666666666666C4.525166666666666 14.291666666666666 1.7082933333333332 11.474791666666665 1.7082933333333332 8C1.7082933333333332 6.013308333333333 2.629825 4.2414233333333335 4.066321666666667 3.089385C4.335603333333333 2.8734283333333335 4.728959999999999 2.9166533333333335 4.944915 3.1859349999999997C5.160871666666666 3.4552099999999997 5.1176466666666665 3.848573333333333 4.848366666666666 4.0645283333333335C3.694975 4.98953 2.9582933333333328 6.40852 2.9582933333333328 8C2.9582933333333328 10.784416666666667 5.215528333333333 13.041666666666666 7.999933333333333 13.041666666666666C8.345125 13.041666666666666 8.624933333333333 13.321483333333333 8.624933333333333 13.666666666666666zM11.060475 12.810558333333333C10.844225000000002 12.541558333333331 10.887033333333335 12.148125 11.156041666666667 11.931875C12.306858333333333 11.006775 13.041599999999999 9.589424999999999 13.041599999999999 8C13.041599999999999 5.215561666666666 10.784408333333332 2.958333333333333 7.999933333333333 2.958333333333333C7.6548083333333325 2.958333333333333 7.374933333333333 2.6785083333333333 7.374933333333333 2.333333333333333C7.374933333333333 1.9881533333333332 7.6548083333333325 1.7083333333333333 7.999933333333333 1.7083333333333333C11.474725000000001 1.7083333333333333 14.291599999999999 4.525206666666667 14.291599999999999 8C14.291599999999999 9.984108333333333 13.372483333333332 11.753958333333332 11.939225 12.906125C11.670166666666663 13.122375 11.276725 13.079625 11.060475 12.810558333333333z'
         fill='currentColor'

diff --git a/src/modules/icon/util.tsx b/src/modules/icon/util.tsx
@@ -0,0 +1,14 @@
+import type { ComponentProps, ForwardedRef, ReactNode } from 'react'
+
+export function createSvgComponent(
+  render: (options: ComponentProps<'svg'> & { ref: ForwardedRef<SVGSVGElement> }) => ReactNode,
+) {
+  return forwardRef<SVGSVGElement, ComponentProps<'svg'>>((props, ref) => {
+    return render({
+      xmlns: 'http://www.w3.org/2000/svg',
+      xmlnsXlink: 'http://www.w3.org/1999/xlink',
+      ...props,
+      ref,
+    })
+  })
+}