|
|
@@ -0,0 +1,85 @@
|
|
|
+import { View } from '@tarojs/components'
|
|
|
+
|
|
|
+interface IconProps {
|
|
|
+ name: string
|
|
|
+ size?: string
|
|
|
+ color?: string
|
|
|
+ className?: string
|
|
|
+ onClick?: () => void
|
|
|
+}
|
|
|
+
|
|
|
+// 图标名称到 Heroicons 类名的映射
|
|
|
+const iconClassMap: Record<string, string> = {
|
|
|
+ // 搜索相关
|
|
|
+ 'search': 'i-heroicons-magnifying-glass-20-solid',
|
|
|
+ 'close-circle-filled': 'i-heroicons-x-circle-20-solid',
|
|
|
+
|
|
|
+ // 导航相关
|
|
|
+ 'home': 'i-heroicons-home-20-solid',
|
|
|
+ 'user': 'i-heroicons-user-20-solid',
|
|
|
+ 'shopping-cart': 'i-heroicons-shopping-cart-20-solid',
|
|
|
+ 'heart': 'i-heroicons-heart-20-solid',
|
|
|
+
|
|
|
+ // 操作相关
|
|
|
+ 'add': 'i-heroicons-plus-20-solid',
|
|
|
+ 'minus': 'i-heroicons-minus-20-solid',
|
|
|
+ 'close': 'i-heroicons-x-mark-20-solid',
|
|
|
+ 'check': 'i-heroicons-check-20-solid',
|
|
|
+ 'loading': 'i-heroicons-arrow-path-20-solid',
|
|
|
+
|
|
|
+ // 方向相关
|
|
|
+ 'arrow-up': 'i-heroicons-chevron-up-20-solid',
|
|
|
+ 'arrow-down': 'i-heroicons-chevron-down-20-solid',
|
|
|
+ 'arrow-left': 'i-heroicons-chevron-left-20-solid',
|
|
|
+ 'arrow-right': 'i-heroicons-chevron-right-20-solid',
|
|
|
+ 'caret-up': 'i-heroicons-chevron-up-down-20-solid',
|
|
|
+ 'caret-down': 'i-heroicons-chevron-up-down-20-solid',
|
|
|
+ 'caret-left': 'i-heroicons-chevron-left-right-20-solid',
|
|
|
+ 'caret-right': 'i-heroicons-chevron-left-right-20-solid',
|
|
|
+
|
|
|
+ // 状态相关
|
|
|
+ 'success': 'i-heroicons-check-circle-20-solid',
|
|
|
+ 'error': 'i-heroicons-exclamation-circle-20-solid',
|
|
|
+ 'warning': 'i-heroicons-exclamation-triangle-20-solid',
|
|
|
+ 'info': 'i-heroicons-information-circle-20-solid',
|
|
|
+ 'question': 'i-heroicons-question-mark-circle-20-solid',
|
|
|
+
|
|
|
+ // 文件相关
|
|
|
+ 'file': 'i-heroicons-document-20-solid',
|
|
|
+ 'folder': 'i-heroicons-folder-20-solid',
|
|
|
+ 'image': 'i-heroicons-photo-20-solid',
|
|
|
+
|
|
|
+ // 其他常用
|
|
|
+ 'star': 'i-heroicons-star-20-solid',
|
|
|
+ 'heart-filled': 'i-heroicons-heart-20-solid',
|
|
|
+ 'setting': 'i-heroicons-cog-6-tooth-20-solid',
|
|
|
+ 'filter': 'i-heroicons-funnel-20-solid',
|
|
|
+ 'share': 'i-heroicons-share-20-solid',
|
|
|
+ 'more': 'i-heroicons-ellipsis-horizontal-20-solid',
|
|
|
+ 'ellipsis': 'i-heroicons-ellipsis-horizontal-20-solid',
|
|
|
+}
|
|
|
+
|
|
|
+export default function TDesignIcon({
|
|
|
+ name,
|
|
|
+ size = '32rpx',
|
|
|
+ color = '#fa550f',
|
|
|
+ className = '',
|
|
|
+ onClick
|
|
|
+}: IconProps) {
|
|
|
+ const iconClass = iconClassMap[name] || `i-heroicons-question-mark-circle-20-solid`
|
|
|
+
|
|
|
+ return (
|
|
|
+ <View
|
|
|
+ className={`${iconClass} tdesign-icon tdesign-icon--${name} ${className}`}
|
|
|
+ style={{
|
|
|
+ fontSize: size,
|
|
|
+ color,
|
|
|
+ display: 'inline-flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ lineHeight: '1'
|
|
|
+ }}
|
|
|
+ onClick={onClick}
|
|
|
+ />
|
|
|
+ )
|
|
|
+}
|