🦄 refactor(ID1000779): 八、收藏功能；

【八、收藏功能；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000779

src/components/iconText/index.module.scss

@@ -0,0 +1,20 @@
+.iconText{
+  display: flex;
+  font-size: 28px;
+  .iconfont{
+    font-size: 40px;
+  }
+  .text{
+    padding: 8px;
+  }
+}
+// 水平方向
+.iconText--horizontal{
+  flex-flow: row nowrap;
+  align-items: center;
+}
+// 垂直方向
+.iconText--vertical{
+  flex-flow: column nowrap;
+  align-items: center;
+}

src/components/iconText/index.tsx

@@ -0,0 +1,56 @@
+import { Text, View } from '@tarojs/components'
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import type { IconNames } from '../iconfont/iconfont'
+import IconFont from '../iconfont/iconfont'
+import styles from './index.module.scss'
+
+type Direaction = 'left' | 'right' | 'bottom' | 'top'
+
+interface PropsType {
+  iconName: IconNames
+  iconSize?: number
+  svg?: boolean
+  color?: string
+  text?: string
+  direction?: Direaction
+  children?: React.ReactNode
+  customClass?: string
+  customStyle?: React.CSSProperties
+  textClassName?: string
+  textCustomStyle?: React.CSSProperties
+}
+
+const IconText: FC<PropsType> = (props) => {
+  const { children, svg = false, iconName, iconSize = 40, text = '', color, textCustomStyle, direction = 'left' } = props
+  const classNameObject = {
+    [styles['iconText--horizontal']]: ['left', 'right'].includes(direction),
+    [styles['iconText--vertical']]: ['bottom', 'top'].includes(direction),
+  }
+  const iconComponent = svg ? <IconFont name={iconName} size={iconSize} color={color}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>
+
+  const textComponent = children || <Text className={classnames(props.textClassName, styles.text)} style={textCustomStyle}>{text}</Text>
+
+  const component = () => {
+    if (direction === 'left' || direction === 'top') {
+      return <>
+        {iconComponent}
+        {textComponent}
+      </>
+    }
+    else if (direction === 'right' || direction === 'bottom') {
+      return <>
+        {textComponent}
+        {iconComponent}
+      </>
+    }
+  }
+
+  return (
+    <View className={classnames(styles.iconText, classNameObject, props.customStyle, props.customClass)}>
+      {component()}
+    </View>
+  )
+}
+export default IconText