@phill-component/icons 0.2.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/mobile/uvue/icon-calendar/calendar.png +0 -0
  2. package/dist/mobile/uvue/{Task.uvue → icon-calendar/icon-calendar.uvue} +15 -6
  3. package/dist/mobile/uvue/icon-file-fold/file_fold.png +0 -0
  4. package/dist/mobile/uvue/icon-file-fold/icon-file-fold.uvue +75 -0
  5. package/dist/mobile/uvue/{Home.uvue → icon-home/icon-home.uvue} +15 -6
  6. package/dist/mobile/uvue/{Setting.uvue → icon-setting/icon-setting.uvue} +15 -6
  7. package/dist/mobile/uvue/icon-setting/setting.png +0 -0
  8. package/dist/mobile/uvue/{Calendar.uvue → icon-task/icon-task.uvue} +15 -6
  9. package/dist/mobile/uvue/icon-task/task.png +0 -0
  10. package/dist/mobile/uvue/{ToLandscape.uvue → icon-to-landscape/icon-to-landscape.uvue} +15 -6
  11. package/dist/mobile/uvue/icon-to-landscape/to_landscape.png +0 -0
  12. package/dist/mobile/vue/{Calendar.vue → icon-calendar.vue} +6 -10
  13. package/dist/mobile/vue/icon-file-fold.vue +58 -0
  14. package/dist/mobile/vue/icon-home.vue +58 -0
  15. package/dist/mobile/vue/{Setting.vue → icon-setting.vue} +6 -10
  16. package/dist/mobile/vue/{Task.vue → icon-task.vue} +6 -10
  17. package/dist/mobile/vue/{ToLandscape.vue → icon-to-landscape.vue} +6 -10
  18. package/dist/web/vue/Calendar.vue +4 -8
  19. package/dist/web/vue/FileFold.vue +4 -8
  20. package/dist/web/vue/Home.vue +4 -8
  21. package/dist/web/vue/Setting.vue +4 -8
  22. package/dist/web/vue/Task.vue +4 -8
  23. package/dist/web/vue/ToLandscape.vue +4 -8
  24. package/package.json +6 -4
  25. package/scripts/build.js +29 -34
  26. package/scripts/install.js +31 -6
  27. package/scripts/templates/mobile.uvue.tpl +14 -5
  28. package/scripts/templates/mobile.vue.tpl +6 -10
  29. package/scripts/templates/web.vue.tpl +4 -8
  30. package/dist/image/png/calendar.png +0 -0
  31. package/dist/image/png/file_fold.png +0 -0
  32. package/dist/image/png/setting.png +0 -0
  33. package/dist/image/png/task.png +0 -0
  34. package/dist/image/png/to_landscape.png +0 -0
  35. package/dist/image/svg/calendar.svg +0 -1
  36. package/dist/image/svg/file_fold.svg +0 -1
  37. package/dist/image/svg/home.svg +0 -1
  38. package/dist/image/svg/setting.svg +0 -1
  39. package/dist/image/svg/task.svg +0 -1
  40. package/dist/image/svg/to_landscape.svg +0 -1
  41. package/dist/mobile/uvue/FileFold.uvue +0 -66
  42. package/dist/mobile/uvue/index.uts +0 -6
  43. package/dist/mobile/vue/FileFold.vue +0 -62
  44. package/dist/mobile/vue/Home.vue +0 -62
  45. package/dist/mobile/vue/index.js +0 -6
  46. /package/dist/{image/png → mobile/uvue/icon-home}/home.png +0 -0
@@ -1,9 +1,7 @@
1
1
  <template>
2
- <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
3
3
  <!-- #ifdef H5 -->
4
- <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg">
5
- <path fill="#8a94dc" d="M18.059 12.905a2 2 0 0 1 1.6 3.199h.001c-.01.014-.544.747-.595 1.514l-.003 1.258 1.712.383a1.645 1.645 0 0 1 1.287 1.605v.65a.275.275 0 0 1-.274.275h-7.45a.275.275 0 0 1-.274-.274v-.653c0-.77.534-1.437 1.285-1.605l1.714-.386.003-1.14h-.004a2.6 2.6 0 0 0-.5-1.501 2.001 2.001 0 0 1 1.498-3.324"/><path fill="#fff" d="M6.96 3.387c0-.598.431-1.082.962-1.082h5.77c.53 0 .96.484.96 1.082 0 .597-.43 1.082-.96 1.082h-5.77c-.53 0-.961-.485-.961-1.082"/><path fill="#6571c4" d="M6.157 3.062q-.019.132-.02.27c0 1.046.824 1.895 1.842 1.895h5.524c1.017 0 1.842-.849 1.842-1.895a2 2 0 0 0-.02-.27h1.222c1.205 0 2.182.976 2.183 2.181v6.197a3.363 3.363 0 0 0-3.235 5.47c.11.163.272.473.272.849v.24l-.87.195a2.99 2.99 0 0 0-2.332 2.724H4.932a2.18 2.18 0 0 1-2.182-2.182V5.243c0-1.205.977-2.181 2.182-2.181z"/><path fill="#6571c4" d="M6.95 3.332c0-.598.424-1.082.947-1.082h5.688c.523 0 .948.484.948 1.082s-.425 1.082-.948 1.082H7.897c-.523 0-.948-.484-.948-1.082"/><path fill="#fff" fill-rule="evenodd" d="M14.604 8.9a.77.77 0 0 1 .169 1.11l-3.103 3.975c-1.133 1.468-2.234 1.071-3.128.217l-1.487-1.42a.77.77 0 0 1 0-1.12.857.857 0 0 1 1.173 0l1.487 1.42c.178.17.474.15.625-.044l3.103-3.976a.855.855 0 0 1 1.16-.162" clip-rule="evenodd"/>
6
- </svg>
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 6.25a1.625 1.625 0 0 0 3.25 0V4.125h4.625v2a1.625 1.625 0 1 0 3.25 0v-2H19.5a2 2 0 0 1 2 2v7.166a3.07 3.07 0 0 0-2.088-.818 3.097 3.097 0 0 0-3.092 3.102c0 .76.273 1.455.725 1.994-2.167.837-3.08 2.83-3.068 4.056H4.5a2 2 0 0 1-2-2v-13.5a2 2 0 0 1 2-2h2z"/><path fill="currentColor" d="M7.557 14.718c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm-5.054-4.593c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.047 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.217a.714.714 0 0 1-.714-.714V10.84c0-.395.32-.715.714-.715z"/><rect width="2" height="4.752" x="7.125" y="2.5" fill="currentColor" rx="1"/><rect width="2" height="4.752" x="15" y="2.375" fill="currentColor" rx="1"/><path fill="currentColor" d="M19.652 18.436c3.333 0 4 2.006 4 2.675 0 .668-.665.67-.667.67H16.32s-.666-.001-.667-.67c0-.669.667-2.675 4-2.675m0-4.683c.53 0 1.04.211 1.414.588a2.01 2.01 0 0 1 0 2.838 1.997 1.997 0 0 1-2.828 0 2.01 2.01 0 0 1 0-2.838 2 2 0 0 1 1.414-.588"/></svg>
7
5
  <!-- #endif -->
8
6
  <!-- #ifndef H5 -->
9
7
  <image :src="imgSrc" :style="iconBoxStyle" />
@@ -13,10 +11,10 @@
13
11
  </template>
14
12
  <script setup lang="uts">
15
13
  import { computed } from 'vue'
16
- import imgSrc from '@/uni_modules/@phill-component/icons/dist/image/png/task.png'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-calendar/calendar.png'
17
15
  const props = defineProps({
18
16
  size: { type: [String, Number], default: '1em' },
19
- color: { type: String, default: '' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
20
18
  label: { type: [String, Number], default: '' },
21
19
  labelPos: { type: String, default: 'right' },
22
20
  labelSize: { type: [String, Number], default: '15px' },
@@ -36,6 +34,9 @@ function toPx(v: any): string {
36
34
  }
37
35
  const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
38
36
  const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
37
+ const iconStyle = computed((): UTSJSONObject => {
38
+ return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
39
+ })
39
40
  const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
40
41
  const wrapStyle = computed((): UTSJSONObject => {
41
42
  const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
@@ -46,6 +47,14 @@ const wrapStyle = computed((): UTSJSONObject => {
46
47
  }
47
48
  return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
48
49
  })
50
+ const rootStyle = computed((): UTSJSONObject => {
51
+ const s = wrapStyle.value
52
+ const i = iconStyle.value
53
+ for (const key in i) {
54
+ s[key] = i[key]
55
+ }
56
+ return s
57
+ })
49
58
  const labelStyle = computed((): UTSJSONObject => {
50
59
  const out = {} as UTSJSONObject
51
60
  if (props.labelColor != '') out['color'] = props.labelColor
@@ -0,0 +1,75 @@
1
+ <template>
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
3
+ <!-- #ifdef H5 -->
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g filter="url(#a)"><path fill="currentColor" d="M4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z"/><path fill="currentColor" fill-opacity=".4" d="M4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z"/><path fill="currentColor" fill-opacity=".96" d="M4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z"/></g><path fill="currentColor" fill-opacity=".129" fill-rule="evenodd" d="M18.3 22.56H7.5a2.16 2.16 0 0 1-2.16-2.16V3.6A2.16 2.16 0 0 1 7.5 1.44h7.366q.317 0 .614.09v1.776a2.82 2.82 0 0 0 1.83 2.64l3.103 1.164q.046.22.046.448V20.4a2.16 2.16 0 0 1-2.16 2.16m1.49-16.58-3.293-3.796a2 2 0 0 0-.177-.181v1.303a1.98 1.98 0 0 0 1.285 1.854zM4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z" clip-rule="evenodd"/><g filter="url(#e)"><path fill="currentColor" d="M2.7 9a3 3 0 0 1 3-3h8.4a3 3 0 0 1 3 3v8.4a3 3 0 0 1-3 3H5.7a3 3 0 0 1-3-3z"/></g><path fill="currentColor" fill-opacity=".129" fill-rule="evenodd" d="M14.1 6.72H5.7A2.28 2.28 0 0 0 3.42 9v8.4a2.28 2.28 0 0 0 2.28 2.28h8.4a2.28 2.28 0 0 0 2.28-2.28V9a2.28 2.28 0 0 0-2.28-2.28M5.7 6a3 3 0 0 0-3 3v8.4a3 3 0 0 0 3 3h8.4a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3z" clip-rule="evenodd"/><path fill="currentColor" d="M8.356 8.326h1.287c.142 0 .257-.103.257-.229V6.95c0-.127-.115-.229-.257-.229H8.356c-.142 0-.256.102-.256.229v1.148c0 .126.114.229.256.229m3.087 0h-1.287c-.142 0-.256.102-.256.229v1.148c0 .127.114.229.256.229h1.287c.142 0 .257-.103.257-.229V8.555c0-.127-.115-.23-.257-.23m-3.087 3.212h1.287c.142 0 .257-.103.257-.229v-1.148c0-.127-.115-.23-.257-.23H8.356c-.142 0-.256.103-.256.23v1.148c0 .126.114.229.256.229m3.087 0h-1.287c-.142 0-.256.102-.256.228v1.149c0 .126.114.229.256.229h1.287c.142 0 .257-.103.257-.229v-1.149c0-.126-.115-.228-.257-.228m-.373 2.492H8.656c-.307 0-.556.223-.556.497v2.497c0 .274.249.496.556.496h2.414c.308 0 .557-.222.557-.496v-2.497c0-.274-.25-.497-.557-.497m-.088 2.644c0 .22-.2.398-.447.398H9.192c-.247 0-.447-.178-.447-.398v-.44c0-.22.2-.399.447-.399h1.342c.247 0 .448.179.448.4z"/><defs><linearGradient id="b" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"/><stop offset="1" stop-color="currentColor" stop-opacity=".9"/><stop offset="1" stop-color="currentColor" stop-opacity=".9"/></linearGradient><linearGradient id="c" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" stop-opacity=".4"/><stop offset="1" stop-color="currentColor"/></linearGradient><linearGradient id="d" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"/><stop offset="1" stop-color="currentColor" stop-opacity=".9"/></linearGradient><filter id="a" width="16.8" height="23.28" x="4.5" y=".12" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.48"/><feGaussianBlur stdDeviation=".24"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.00784314 0 0 0 0 0.0235294 0 0 0 0 0.168627 0 0 0 0.04 0"/><feBlend in2="shape" result="effect1_innerShadow_16434_6563"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.72"/><feGaussianBlur stdDeviation=".06"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.00784314 0 0 0 0 0.0235294 0 0 0 0 0.168627 0 0 0 0.02 0"/><feBlend in2="effect1_innerShadow_16434_6563" result="effect2_innerShadow_16434_6563"/></filter><filter id="e" width="18" height="18" x="2.1" y="4.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1.2" dy=".6"/><feGaussianBlur stdDeviation=".9"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.698039 0 0 0 0 0.388235 0 0 0 0 0.988235 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16434_6563"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16434_6563" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.6" dy="-.6"/><feGaussianBlur stdDeviation="1.2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.336198 0 0 0 0 0.336198 0 0 0 0 0.336198 0 0 0 0.25 0"/><feBlend in2="shape" result="effect2_innerShadow_16434_6563"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".6" dy="1.2"/><feGaussianBlur stdDeviation="1.8"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/><feBlend in2="effect2_innerShadow_16434_6563" result="effect3_innerShadow_16434_6563"/></filter></defs></svg>
5
+ <!-- #endif -->
6
+ <!-- #ifndef H5 -->
7
+ <image :src="imgSrc" :style="iconBoxStyle" />
8
+ <!-- #endif -->
9
+ <text v-if="label != ''" class="icon__label" :style="labelStyle">{{ label }}</text>
10
+ </view>
11
+ </template>
12
+ <script setup lang="uts">
13
+ import { computed } from 'vue'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-file-fold/file_fold.png'
15
+ const props = defineProps({
16
+ size: { type: [String, Number], default: '1em' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
18
+ label: { type: [String, Number], default: '' },
19
+ labelPos: { type: String, default: 'right' },
20
+ labelSize: { type: [String, Number], default: '15px' },
21
+ labelColor: { type: String, default: '' },
22
+ space: { type: [String, Number], default: '3px' },
23
+ width: { type: [String, Number], default: '' },
24
+ height: { type: [String, Number], default: '' },
25
+ hoverClass: { type: String, default: '' },
26
+ index: { type: [String, Number], default: '' },
27
+ stop: { type: Boolean, default: false }
28
+ })
29
+ const emit = defineEmits(['click'])
30
+ function toPx(v: any): string {
31
+ if (typeof v === 'number') return (v as number).toString() + 'px'
32
+ const s = (v as string)
33
+ return s != '' ? s : ''
34
+ }
35
+ const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
36
+ const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
37
+ const iconStyle = computed((): UTSJSONObject => {
38
+ return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
39
+ })
40
+ const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
41
+ const wrapStyle = computed((): UTSJSONObject => {
42
+ const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
43
+ let dir: string = 'row'
44
+ const cand = map[props.labelPos] as string | null
45
+ if (cand != null && cand.length > 0) {
46
+ dir = cand
47
+ }
48
+ return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
49
+ })
50
+ const rootStyle = computed((): UTSJSONObject => {
51
+ const s = wrapStyle.value
52
+ const i = iconStyle.value
53
+ for (const key in i) {
54
+ s[key] = i[key]
55
+ }
56
+ return s
57
+ })
58
+ const labelStyle = computed((): UTSJSONObject => {
59
+ const out = {} as UTSJSONObject
60
+ if (props.labelColor != '') out['color'] = props.labelColor
61
+ out['fontSize'] = toPx(props.labelSize)
62
+ out['marginLeft'] = props.labelPos == 'right' ? toPx(props.space) : 0
63
+ out['marginTop'] = props.labelPos == 'bottom' ? toPx(props.space) : 0
64
+ out['marginRight'] = props.labelPos == 'left' ? toPx(props.space) : 0
65
+ out['marginBottom'] = props.labelPos == 'top' ? toPx(props.space) : 0
66
+ return out
67
+ })
68
+ function onTap(e: UniPointerEvent) {
69
+ emit('click', props.index)
70
+ if (props.stop) e.stopPropagation()
71
+ }
72
+ </script>
73
+ <style scoped>
74
+ .icon__label { line-height: 1; }
75
+ </style>
@@ -1,9 +1,7 @@
1
1
  <template>
2
- <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
3
3
  <!-- #ifdef H5 -->
4
- <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg">
5
- <path fill="#222" d="M615.64 510.5a62.15 62.15 0 0 1-32.75-9.36l-53.68-33.22a17.19 17.19 0 0 0-18-.07L461.63 498a62.31 62.31 0 0 1-67.88-2.09l-36.91-25.66a17.31 17.31 0 0 0-19.7 0l-31 21.57a62.2 62.2 0 0 1-79.58-7.08l-21.5-21.5a107 107 0 0 1-30.86-87.52c2.7-25 5.57-50.63 8.54-76.1A113.8 113.8 0 0 1 295.78 199l462.35.07a113.87 113.87 0 0 1 113 100.48c3.3 27.95 6.25 54.41 8.77 78.65a107 107 0 0 1-30.91 87l-13.27 13.27a62.51 62.51 0 0 1-74.24 10.4l-39.68-22.04a17.28 17.28 0 0 0-17.31.33l-56.58 34.28a62.2 62.2 0 0 1-32.27 9.06m-95.51-90.21a62.2 62.2 0 0 1 32.76 9.36l53.68 33.22a17.19 17.19 0 0 0 18 .09l56.58-34.29a62.38 62.38 0 0 1 62.48-1.18l39.71 22.05a17.31 17.31 0 0 0 20.57-2.88l13.27-13.27a62.16 62.16 0 0 0 18-50.58c-2.5-24-5.42-50.28-8.7-78A68.84 68.84 0 0 0 758.15 244H295.79a68.79 68.79 0 0 0-68.34 60.84c-3 25.34-5.81 50.81-8.5 75.71a62.22 62.22 0 0 0 17.94 50.88l21.5 21.5a17.25 17.25 0 0 0 22.06 2l31-21.58a62.51 62.51 0 0 1 71.09 0l36.91 25.67a17.27 17.27 0 0 0 18.81.58l49.54-30.12a62.2 62.2 0 0 1 32.33-9.19m104.46 337.56a22.5 22.5 0 0 1-22.5-22.5v-58a76 76 0 0 0-152.1 0v58a22.5 22.5 0 1 1-45 0v-58a121.05 121.05 0 0 1 242.1 0v58a22.5 22.5 0 0 1-22.5 22.5"/><path fill="#222" d="M527.05 849.87c-38 0-76.5-1.53-114.4-4.56l-48-3.84a155 155 0 0 1-142.21-142.21l-3.84-48c-3-38.19-3-57.22-3-95.13v-.54a22.5 22.5 0 0 1 45 0v.54c0 36.71 0 55.15 2.91 91.54l3.83 48a110.08 110.08 0 0 0 100.89 100.95l48 3.83c36.81 2.94 74.22 4.48 111.14 4.42 36.7 0 73.87-1.49 110.47-4.42l48-3.83a110.06 110.06 0 0 0 100.95-100.94l3.83-48c2.91-36.39 2.91-54.83 2.91-91.54v-.54a22.5 22.5 0 1 1 45 0v.54c0 37.91 0 56.94-3 95.13l-3.83 48a155 155 0 0 1-142.27 142.2l-48 3.84c-37.78 3-76.15 4.55-114 4.56z"/>
6
- </svg>
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024"><path fill="currentColor" d="M615.64 510.5a62.15 62.15 0 0 1-32.75-9.36l-53.68-33.22a17.19 17.19 0 0 0-18-.07L461.63 498a62.31 62.31 0 0 1-67.88-2.09l-36.91-25.66a17.31 17.31 0 0 0-19.7 0l-31 21.57a62.2 62.2 0 0 1-79.58-7.08l-21.5-21.5a107 107 0 0 1-30.86-87.52c2.7-25 5.57-50.63 8.54-76.1A113.8 113.8 0 0 1 295.78 199l462.35.07a113.87 113.87 0 0 1 113 100.48c3.3 27.95 6.25 54.41 8.77 78.65a107 107 0 0 1-30.91 87l-13.27 13.27a62.51 62.51 0 0 1-74.24 10.4l-39.68-22.04a17.28 17.28 0 0 0-17.31.33l-56.58 34.28a62.2 62.2 0 0 1-32.27 9.06m-95.51-90.21a62.2 62.2 0 0 1 32.76 9.36l53.68 33.22a17.19 17.19 0 0 0 18 .09l56.58-34.29a62.38 62.38 0 0 1 62.48-1.18l39.71 22.05a17.31 17.31 0 0 0 20.57-2.88l13.27-13.27a62.16 62.16 0 0 0 18-50.58c-2.5-24-5.42-50.28-8.7-78A68.84 68.84 0 0 0 758.15 244H295.79a68.79 68.79 0 0 0-68.34 60.84c-3 25.34-5.81 50.81-8.5 75.71a62.22 62.22 0 0 0 17.94 50.88l21.5 21.5a17.25 17.25 0 0 0 22.06 2l31-21.58a62.51 62.51 0 0 1 71.09 0l36.91 25.67a17.27 17.27 0 0 0 18.81.58l49.54-30.12a62.2 62.2 0 0 1 32.33-9.19m104.46 337.56a22.5 22.5 0 0 1-22.5-22.5v-58a76 76 0 0 0-152.1 0v58a22.5 22.5 0 1 1-45 0v-58a121.05 121.05 0 0 1 242.1 0v58a22.5 22.5 0 0 1-22.5 22.5"/><path fill="currentColor" d="M527.05 849.87c-38 0-76.5-1.53-114.4-4.56l-48-3.84a155 155 0 0 1-142.21-142.21l-3.84-48c-3-38.19-3-57.22-3-95.13v-.54a22.5 22.5 0 0 1 45 0v.54c0 36.71 0 55.15 2.91 91.54l3.83 48a110.08 110.08 0 0 0 100.89 100.95l48 3.83c36.81 2.94 74.22 4.48 111.14 4.42 36.7 0 73.87-1.49 110.47-4.42l48-3.83a110.06 110.06 0 0 0 100.95-100.94l3.83-48c2.91-36.39 2.91-54.83 2.91-91.54v-.54a22.5 22.5 0 1 1 45 0v.54c0 37.91 0 56.94-3 95.13l-3.83 48a155 155 0 0 1-142.27 142.2l-48 3.84c-37.78 3-76.15 4.55-114 4.56z"/></svg>
7
5
  <!-- #endif -->
8
6
  <!-- #ifndef H5 -->
9
7
  <image :src="imgSrc" :style="iconBoxStyle" />
@@ -13,10 +11,10 @@
13
11
  </template>
14
12
  <script setup lang="uts">
15
13
  import { computed } from 'vue'
16
- import imgSrc from '@/uni_modules/@phill-component/icons/dist/image/png/home.png'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-home/home.png'
17
15
  const props = defineProps({
18
16
  size: { type: [String, Number], default: '1em' },
19
- color: { type: String, default: '' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
20
18
  label: { type: [String, Number], default: '' },
21
19
  labelPos: { type: String, default: 'right' },
22
20
  labelSize: { type: [String, Number], default: '15px' },
@@ -36,6 +34,9 @@ function toPx(v: any): string {
36
34
  }
37
35
  const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
38
36
  const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
37
+ const iconStyle = computed((): UTSJSONObject => {
38
+ return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
39
+ })
39
40
  const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
40
41
  const wrapStyle = computed((): UTSJSONObject => {
41
42
  const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
@@ -46,6 +47,14 @@ const wrapStyle = computed((): UTSJSONObject => {
46
47
  }
47
48
  return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
48
49
  })
50
+ const rootStyle = computed((): UTSJSONObject => {
51
+ const s = wrapStyle.value
52
+ const i = iconStyle.value
53
+ for (const key in i) {
54
+ s[key] = i[key]
55
+ }
56
+ return s
57
+ })
49
58
  const labelStyle = computed((): UTSJSONObject => {
50
59
  const out = {} as UTSJSONObject
51
60
  if (props.labelColor != '') out['color'] = props.labelColor
@@ -1,9 +1,7 @@
1
1
  <template>
2
- <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
3
3
  <!-- #ifdef H5 -->
4
- <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg">
5
- <path fill="#0a0a0a" fill-rule="evenodd" d="M12 8a4 4 0 1 1 0 8.001 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="#0a0a0a" fill-rule="evenodd" d="M10.539 2.634a2 2 0 0 1 2.922 0l1.675 1.793 2.453-.083a2 2 0 0 1 2.066 2.067l-.082 2.453 1.792 1.675a2 2 0 0 1 0 2.922l-1.792 1.675.082 2.452a2 2 0 0 1-2.067 2.067l-2.452-.082-1.675 1.792a2 2 0 0 1-2.922 0l-1.675-1.792-2.453.082a2 2 0 0 1-2.067-2.066l.083-2.453-1.793-1.675a2 2 0 0 1 0-2.922l1.793-1.675-.083-2.453a2 2 0 0 1 2.067-2.067l2.453.083zm-.214 3.158a2 2 0 0 1-1.53.634l-2.452-.083.083 2.452a2 2 0 0 1-.634 1.53L4 12l1.792 1.675a2 2 0 0 1 .634 1.53l-.083 2.453 2.452-.084a2 2 0 0 1 1.53.633L12 20l1.675-1.793a2 2 0 0 1 1.53-.633l2.453.084-.084-2.454a2 2 0 0 1 .633-1.529L20 12l-1.793-1.675a2 2 0 0 1-.633-1.53l.084-2.452-2.454.083a2 2 0 0 1-1.529-.634L12 4z" clip-rule="evenodd"/>
6
- </svg>
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 8a4 4 0 1 1 0 8.001 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.539 2.634a2 2 0 0 1 2.922 0l1.675 1.793 2.453-.083a2 2 0 0 1 2.066 2.067l-.082 2.453 1.792 1.675a2 2 0 0 1 0 2.922l-1.792 1.675.082 2.452a2 2 0 0 1-2.067 2.067l-2.452-.082-1.675 1.792a2 2 0 0 1-2.922 0l-1.675-1.792-2.453.082a2 2 0 0 1-2.067-2.066l.083-2.453-1.793-1.675a2 2 0 0 1 0-2.922l1.793-1.675-.083-2.453a2 2 0 0 1 2.067-2.067l2.453.083zm-.214 3.158a2 2 0 0 1-1.53.634l-2.452-.083.083 2.452a2 2 0 0 1-.634 1.53L4 12l1.792 1.675a2 2 0 0 1 .634 1.53l-.083 2.453 2.452-.084a2 2 0 0 1 1.53.633L12 20l1.675-1.793a2 2 0 0 1 1.53-.633l2.453.084-.084-2.454a2 2 0 0 1 .633-1.529L20 12l-1.793-1.675a2 2 0 0 1-.633-1.53l.084-2.452-2.454.083a2 2 0 0 1-1.529-.634L12 4z" clip-rule="evenodd"/></svg>
7
5
  <!-- #endif -->
8
6
  <!-- #ifndef H5 -->
9
7
  <image :src="imgSrc" :style="iconBoxStyle" />
@@ -13,10 +11,10 @@
13
11
  </template>
14
12
  <script setup lang="uts">
15
13
  import { computed } from 'vue'
16
- import imgSrc from '@/uni_modules/@phill-component/icons/dist/image/png/setting.png'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-setting/setting.png'
17
15
  const props = defineProps({
18
16
  size: { type: [String, Number], default: '1em' },
19
- color: { type: String, default: '' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
20
18
  label: { type: [String, Number], default: '' },
21
19
  labelPos: { type: String, default: 'right' },
22
20
  labelSize: { type: [String, Number], default: '15px' },
@@ -36,6 +34,9 @@ function toPx(v: any): string {
36
34
  }
37
35
  const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
38
36
  const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
37
+ const iconStyle = computed((): UTSJSONObject => {
38
+ return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
39
+ })
39
40
  const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
40
41
  const wrapStyle = computed((): UTSJSONObject => {
41
42
  const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
@@ -46,6 +47,14 @@ const wrapStyle = computed((): UTSJSONObject => {
46
47
  }
47
48
  return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
48
49
  })
50
+ const rootStyle = computed((): UTSJSONObject => {
51
+ const s = wrapStyle.value
52
+ const i = iconStyle.value
53
+ for (const key in i) {
54
+ s[key] = i[key]
55
+ }
56
+ return s
57
+ })
49
58
  const labelStyle = computed((): UTSJSONObject => {
50
59
  const out = {} as UTSJSONObject
51
60
  if (props.labelColor != '') out['color'] = props.labelColor
@@ -1,9 +1,7 @@
1
1
  <template>
2
- <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
3
3
  <!-- #ifdef H5 -->
4
- <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg">
5
- <path fill="#ff961e" d="M6.5 6.25a1.625 1.625 0 0 0 3.25 0V4.125h4.625v2a1.625 1.625 0 1 0 3.25 0v-2H19.5a2 2 0 0 1 2 2v7.166a3.07 3.07 0 0 0-2.088-.818 3.097 3.097 0 0 0-3.092 3.102c0 .76.273 1.455.725 1.994-2.167.837-3.08 2.83-3.068 4.056H4.5a2 2 0 0 1-2-2v-13.5a2 2 0 0 1 2-2h2z"/><path fill="#fff" d="M7.557 14.718c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm-5.054-4.593c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.047 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.217a.714.714 0 0 1-.714-.714V10.84c0-.395.32-.715.714-.715z"/><rect width="2" height="4.752" x="7.125" y="2.5" fill="#ffc500" rx="1"/><rect width="2" height="4.752" x="15" y="2.375" fill="#ffc500" rx="1"/><path fill="#ff961e" d="M19.652 18.436c3.333 0 4 2.006 4 2.675 0 .668-.665.67-.667.67H16.32s-.666-.001-.667-.67c0-.669.667-2.675 4-2.675m0-4.683c.53 0 1.04.211 1.414.588a2.01 2.01 0 0 1 0 2.838 1.997 1.997 0 0 1-2.828 0 2.01 2.01 0 0 1 0-2.838 2 2 0 0 1 1.414-.588"/>
6
- </svg>
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M18.059 12.905a2 2 0 0 1 1.6 3.199h.001c-.01.014-.544.747-.595 1.514l-.003 1.258 1.712.383a1.645 1.645 0 0 1 1.287 1.605v.65a.275.275 0 0 1-.274.275h-7.45a.275.275 0 0 1-.274-.274v-.653c0-.77.534-1.437 1.285-1.605l1.714-.386.003-1.14h-.004a2.6 2.6 0 0 0-.5-1.501 2.001 2.001 0 0 1 1.498-3.324"/><path fill="currentColor" d="M6.96 3.387c0-.598.431-1.082.962-1.082h5.77c.53 0 .96.484.96 1.082 0 .597-.43 1.082-.96 1.082h-5.77c-.53 0-.961-.485-.961-1.082"/><path fill="currentColor" d="M6.157 3.062q-.019.132-.02.27c0 1.046.824 1.895 1.842 1.895h5.524c1.017 0 1.842-.849 1.842-1.895a2 2 0 0 0-.02-.27h1.222c1.205 0 2.182.976 2.183 2.181v6.197a3.363 3.363 0 0 0-3.235 5.47c.11.163.272.473.272.849v.24l-.87.195a2.99 2.99 0 0 0-2.332 2.724H4.932a2.18 2.18 0 0 1-2.182-2.182V5.243c0-1.205.977-2.181 2.182-2.181z"/><path fill="currentColor" d="M6.95 3.332c0-.598.424-1.082.947-1.082h5.688c.523 0 .948.484.948 1.082s-.425 1.082-.948 1.082H7.897c-.523 0-.948-.484-.948-1.082"/><path fill="currentColor" fill-rule="evenodd" d="M14.604 8.9a.77.77 0 0 1 .169 1.11l-3.103 3.975c-1.133 1.468-2.234 1.071-3.128.217l-1.487-1.42a.77.77 0 0 1 0-1.12.857.857 0 0 1 1.173 0l1.487 1.42c.178.17.474.15.625-.044l3.103-3.976a.855.855 0 0 1 1.16-.162" clip-rule="evenodd"/></svg>
7
5
  <!-- #endif -->
8
6
  <!-- #ifndef H5 -->
9
7
  <image :src="imgSrc" :style="iconBoxStyle" />
@@ -13,10 +11,10 @@
13
11
  </template>
14
12
  <script setup lang="uts">
15
13
  import { computed } from 'vue'
16
- import imgSrc from '@/uni_modules/@phill-component/icons/dist/image/png/calendar.png'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-task/task.png'
17
15
  const props = defineProps({
18
16
  size: { type: [String, Number], default: '1em' },
19
- color: { type: String, default: '' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
20
18
  label: { type: [String, Number], default: '' },
21
19
  labelPos: { type: String, default: 'right' },
22
20
  labelSize: { type: [String, Number], default: '15px' },
@@ -36,6 +34,9 @@ function toPx(v: any): string {
36
34
  }
37
35
  const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
38
36
  const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
37
+ const iconStyle = computed((): UTSJSONObject => {
38
+ return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
39
+ })
39
40
  const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
40
41
  const wrapStyle = computed((): UTSJSONObject => {
41
42
  const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
@@ -46,6 +47,14 @@ const wrapStyle = computed((): UTSJSONObject => {
46
47
  }
47
48
  return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
48
49
  })
50
+ const rootStyle = computed((): UTSJSONObject => {
51
+ const s = wrapStyle.value
52
+ const i = iconStyle.value
53
+ for (const key in i) {
54
+ s[key] = i[key]
55
+ }
56
+ return s
57
+ })
49
58
  const labelStyle = computed((): UTSJSONObject => {
50
59
  const out = {} as UTSJSONObject
51
60
  if (props.labelColor != '') out['color'] = props.labelColor
@@ -1,9 +1,7 @@
1
1
  <template>
2
- <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
3
3
  <!-- #ifdef H5 -->
4
- <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg">
5
- <path fill="#0a0a0a" d="M20 11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM4 20h16v-7H4zm6-18a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V4H4v5a1 1 0 0 1-2 0V4a2 2 0 0 1 2-2zm8 0a1 1 0 0 1 1 .998l.006 3.23.954-.953a1 1 0 0 1 1.414 1.415l-2.657 2.657a1 1 0 0 1-1.414 0L14.646 6.69a1.001 1.001 0 0 1 1.415-1.415l.945.946L17.002 4H14.5a1 1 0 1 1 0-2z"/>
6
- </svg>
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM4 20h16v-7H4zm6-18a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V4H4v5a1 1 0 0 1-2 0V4a2 2 0 0 1 2-2zm8 0a1 1 0 0 1 1 .998l.006 3.23.954-.953a1 1 0 0 1 1.414 1.415l-2.657 2.657a1 1 0 0 1-1.414 0L14.646 6.69a1.001 1.001 0 0 1 1.415-1.415l.945.946L17.002 4H14.5a1 1 0 1 1 0-2z"/></svg>
7
5
  <!-- #endif -->
8
6
  <!-- #ifndef H5 -->
9
7
  <image :src="imgSrc" :style="iconBoxStyle" />
@@ -13,10 +11,10 @@
13
11
  </template>
14
12
  <script setup lang="uts">
15
13
  import { computed } from 'vue'
16
- import imgSrc from '@/uni_modules/@phill-component/icons/dist/image/png/to_landscape.png'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-to-landscape/to_landscape.png'
17
15
  const props = defineProps({
18
16
  size: { type: [String, Number], default: '1em' },
19
- color: { type: String, default: '' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
20
18
  label: { type: [String, Number], default: '' },
21
19
  labelPos: { type: String, default: 'right' },
22
20
  labelSize: { type: [String, Number], default: '15px' },
@@ -36,6 +34,9 @@ function toPx(v: any): string {
36
34
  }
37
35
  const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
38
36
  const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
37
+ const iconStyle = computed((): UTSJSONObject => {
38
+ return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
39
+ })
39
40
  const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
40
41
  const wrapStyle = computed((): UTSJSONObject => {
41
42
  const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
@@ -46,6 +47,14 @@ const wrapStyle = computed((): UTSJSONObject => {
46
47
  }
47
48
  return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
48
49
  })
50
+ const rootStyle = computed((): UTSJSONObject => {
51
+ const s = wrapStyle.value
52
+ const i = iconStyle.value
53
+ for (const key in i) {
54
+ s[key] = i[key]
55
+ }
56
+ return s
57
+ })
49
58
  const labelStyle = computed((): UTSJSONObject => {
50
59
  const out = {} as UTSJSONObject
51
60
  if (props.labelColor != '') out['color'] = props.labelColor
@@ -1,21 +1,20 @@
1
1
  <template>
2
- <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
3
3
  <!-- #ifdef H5 -->
4
- <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
5
- <path fill="#ff961e" d="M6.5 6.25a1.625 1.625 0 0 0 3.25 0V4.125h4.625v2a1.625 1.625 0 1 0 3.25 0v-2H19.5a2 2 0 0 1 2 2v7.166a3.07 3.07 0 0 0-2.088-.818 3.097 3.097 0 0 0-3.092 3.102c0 .76.273 1.455.725 1.994-2.167.837-3.08 2.83-3.068 4.056H4.5a2 2 0 0 1-2-2v-13.5a2 2 0 0 1 2-2h2z"/><path fill="#fff" d="M7.557 14.718c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm-5.054-4.593c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.047 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.217a.714.714 0 0 1-.714-.714V10.84c0-.395.32-.715.714-.715z"/><rect width="2" height="4.752" x="7.125" y="2.5" fill="#ffc500" rx="1"/><rect width="2" height="4.752" x="15" y="2.375" fill="#ffc500" rx="1"/><path fill="#ff961e" d="M19.652 18.436c3.333 0 4 2.006 4 2.675 0 .668-.665.67-.667.67H16.32s-.666-.001-.667-.67c0-.669.667-2.675 4-2.675m0-4.683c.53 0 1.04.211 1.414.588a2.01 2.01 0 0 1 0 2.838 1.997 1.997 0 0 1-2.828 0 2.01 2.01 0 0 1 0-2.838 2 2 0 0 1 1.414-.588"/>
6
- </svg>
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 6.25a1.625 1.625 0 0 0 3.25 0V4.125h4.625v2a1.625 1.625 0 1 0 3.25 0v-2H19.5a2 2 0 0 1 2 2v7.166a3.07 3.07 0 0 0-2.088-.818 3.097 3.097 0 0 0-3.092 3.102c0 .76.273 1.455.725 1.994-2.167.837-3.08 2.83-3.068 4.056H4.5a2 2 0 0 1-2-2v-13.5a2 2 0 0 1 2-2h2z"/><path fill="currentColor" d="M7.557 14.718c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714v-1.228c0-.395.32-.715.715-.715zm-5.054-4.593c.394 0 .714.32.714.715v1.228c0 .395-.32.714-.714.714H6.34a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.054 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.216a.714.714 0 0 1-.715-.714V10.84c0-.395.32-.715.715-.715zm5.047 0c.395 0 .715.32.715.715v1.228c0 .395-.32.714-.715.714h-1.217a.714.714 0 0 1-.714-.714V10.84c0-.395.32-.715.714-.715z"/><rect width="2" height="4.752" x="7.125" y="2.5" fill="currentColor" rx="1"/><rect width="2" height="4.752" x="15" y="2.375" fill="currentColor" rx="1"/><path fill="currentColor" d="M19.652 18.436c3.333 0 4 2.006 4 2.675 0 .668-.665.67-.667.67H16.32s-.666-.001-.667-.67c0-.669.667-2.675 4-2.675m0-4.683c.53 0 1.04.211 1.414.588a2.01 2.01 0 0 1 0 2.838 1.997 1.997 0 0 1-2.828 0 2.01 2.01 0 0 1 0-2.838 2 2 0 0 1 1.414-.588"/></svg>
7
5
  <!-- #endif -->
8
6
  <!-- #ifndef H5 -->
9
- <image :src="imgSrc" :style="iconBoxStyle" v-bind="$attrs" />
7
+ <image :src="imgSrc" :style="iconBoxStyle" />
10
8
  <!-- #endif -->
11
9
  <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
12
10
  </view>
13
11
  </template>
14
12
  <script setup>
15
13
  import { computed } from 'vue'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-calendar/calendar.png'
16
15
  const props = defineProps({
17
16
  size: { type: [String, Number], default: '1em' },
18
- color: { type: String, default: '' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
19
18
  label: { type: [String, Number], default: '' },
20
19
  labelPos: { type: String, default: 'right' },
21
20
  labelSize: { type: [String, Number], default: '15px' },
@@ -33,9 +32,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
33
32
  const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
34
33
  const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
35
34
  const iconStyle = computed(() => {
36
- const s = { }
37
- if (props.color) s.color = props.color
38
- return s
35
+ return { color: props.color || 'inherit' }
39
36
  })
40
37
  const wrapStyle = computed(() => {
41
38
  const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
@@ -51,7 +48,6 @@ const labelStyle = computed(() => {
51
48
  marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
52
49
  }
53
50
  })
54
- const imgSrc = '@/uni_modules/@phill-component/icons/dist/image/png/calendar.png'
55
51
  function onTap(e) {
56
52
  emit('click', props.index)
57
53
  if (props.stop && e && e.stopPropagation) e.stopPropagation()
@@ -0,0 +1,58 @@
1
+ <template>
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
3
+ <!-- #ifdef H5 -->
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g filter="url(#a)"><path fill="currentColor" d="M4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z"/><path fill="currentColor" fill-opacity=".4" d="M4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z"/><path fill="currentColor" fill-opacity=".96" d="M4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z"/></g><path fill="currentColor" fill-opacity=".129" fill-rule="evenodd" d="M18.3 22.56H7.5a2.16 2.16 0 0 1-2.16-2.16V3.6A2.16 2.16 0 0 1 7.5 1.44h7.366q.317 0 .614.09v1.776a2.82 2.82 0 0 0 1.83 2.64l3.103 1.164q.046.22.046.448V20.4a2.16 2.16 0 0 1-2.16 2.16m1.49-16.58-3.293-3.796a2 2 0 0 0-.177-.181v1.303a1.98 1.98 0 0 0 1.285 1.854zM4.5 3.6a3 3 0 0 1 3-3h7.366a3 3 0 0 1 2.266 1.034l3.433 3.958a3 3 0 0 1 .734 1.966V20.4a3 3 0 0 1-3 3H7.5a3 3 0 0 1-3-3z" clip-rule="evenodd"/><g filter="url(#e)"><path fill="currentColor" d="M2.7 9a3 3 0 0 1 3-3h8.4a3 3 0 0 1 3 3v8.4a3 3 0 0 1-3 3H5.7a3 3 0 0 1-3-3z"/></g><path fill="currentColor" fill-opacity=".129" fill-rule="evenodd" d="M14.1 6.72H5.7A2.28 2.28 0 0 0 3.42 9v8.4a2.28 2.28 0 0 0 2.28 2.28h8.4a2.28 2.28 0 0 0 2.28-2.28V9a2.28 2.28 0 0 0-2.28-2.28M5.7 6a3 3 0 0 0-3 3v8.4a3 3 0 0 0 3 3h8.4a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3z" clip-rule="evenodd"/><path fill="currentColor" d="M8.356 8.326h1.287c.142 0 .257-.103.257-.229V6.95c0-.127-.115-.229-.257-.229H8.356c-.142 0-.256.102-.256.229v1.148c0 .126.114.229.256.229m3.087 0h-1.287c-.142 0-.256.102-.256.229v1.148c0 .127.114.229.256.229h1.287c.142 0 .257-.103.257-.229V8.555c0-.127-.115-.23-.257-.23m-3.087 3.212h1.287c.142 0 .257-.103.257-.229v-1.148c0-.127-.115-.23-.257-.23H8.356c-.142 0-.256.103-.256.23v1.148c0 .126.114.229.256.229m3.087 0h-1.287c-.142 0-.256.102-.256.228v1.149c0 .126.114.229.256.229h1.287c.142 0 .257-.103.257-.229v-1.149c0-.126-.115-.228-.257-.228m-.373 2.492H8.656c-.307 0-.556.223-.556.497v2.497c0 .274.249.496.556.496h2.414c.308 0 .557-.222.557-.496v-2.497c0-.274-.25-.497-.557-.497m-.088 2.644c0 .22-.2.398-.447.398H9.192c-.247 0-.447-.178-.447-.398v-.44c0-.22.2-.399.447-.399h1.342c.247 0 .448.179.448.4z"/><defs><linearGradient id="b" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"/><stop offset="1" stop-color="currentColor" stop-opacity=".9"/><stop offset="1" stop-color="currentColor" stop-opacity=".9"/></linearGradient><linearGradient id="c" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" stop-opacity=".4"/><stop offset="1" stop-color="currentColor"/></linearGradient><linearGradient id="d" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"/><stop offset="1" stop-color="currentColor" stop-opacity=".9"/></linearGradient><filter id="a" width="16.8" height="23.28" x="4.5" y=".12" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.48"/><feGaussianBlur stdDeviation=".24"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.00784314 0 0 0 0 0.0235294 0 0 0 0 0.168627 0 0 0 0.04 0"/><feBlend in2="shape" result="effect1_innerShadow_16434_6563"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.72"/><feGaussianBlur stdDeviation=".06"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.00784314 0 0 0 0 0.0235294 0 0 0 0 0.168627 0 0 0 0.02 0"/><feBlend in2="effect1_innerShadow_16434_6563" result="effect2_innerShadow_16434_6563"/></filter><filter id="e" width="18" height="18" x="2.1" y="4.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1.2" dy=".6"/><feGaussianBlur stdDeviation=".9"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.698039 0 0 0 0 0.388235 0 0 0 0 0.988235 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16434_6563"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16434_6563" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.6" dy="-.6"/><feGaussianBlur stdDeviation="1.2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.336198 0 0 0 0 0.336198 0 0 0 0 0.336198 0 0 0 0.25 0"/><feBlend in2="shape" result="effect2_innerShadow_16434_6563"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".6" dy="1.2"/><feGaussianBlur stdDeviation="1.8"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/><feBlend in2="effect2_innerShadow_16434_6563" result="effect3_innerShadow_16434_6563"/></filter></defs></svg>
5
+ <!-- #endif -->
6
+ <!-- #ifndef H5 -->
7
+ <image :src="imgSrc" :style="iconBoxStyle" />
8
+ <!-- #endif -->
9
+ <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
10
+ </view>
11
+ </template>
12
+ <script setup>
13
+ import { computed } from 'vue'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-file-fold/file_fold.png'
15
+ const props = defineProps({
16
+ size: { type: [String, Number], default: '1em' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
18
+ label: { type: [String, Number], default: '' },
19
+ labelPos: { type: String, default: 'right' },
20
+ labelSize: { type: [String, Number], default: '15px' },
21
+ labelColor: { type: String, default: '' },
22
+ space: { type: [String, Number], default: '3px' },
23
+ width: { type: [String, Number], default: '' },
24
+ height: { type: [String, Number], default: '' },
25
+ hoverClass: { type: String, default: '' },
26
+ index: { type: [String, Number], default: '' },
27
+ stop: { type: Boolean, default: false }
28
+ })
29
+ const emit = defineEmits(['click'])
30
+ const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
31
+ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
32
+ const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
33
+ const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
34
+ const iconStyle = computed(() => {
35
+ return { color: props.color || 'inherit' }
36
+ })
37
+ const wrapStyle = computed(() => {
38
+ const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
39
+ return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
40
+ })
41
+ const labelStyle = computed(() => {
42
+ return {
43
+ color: props.labelColor || '',
44
+ fontSize: toPx(props.labelSize),
45
+ marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
46
+ marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
47
+ marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
48
+ marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
49
+ }
50
+ })
51
+ function onTap(e) {
52
+ emit('click', props.index)
53
+ if (props.stop && e && e.stopPropagation) e.stopPropagation()
54
+ }
55
+ </script>
56
+ <style scoped>
57
+ .icon__label { line-height: 1; }
58
+ </style>
@@ -0,0 +1,58 @@
1
+ <template>
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
3
+ <!-- #ifdef H5 -->
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024"><path fill="currentColor" d="M615.64 510.5a62.15 62.15 0 0 1-32.75-9.36l-53.68-33.22a17.19 17.19 0 0 0-18-.07L461.63 498a62.31 62.31 0 0 1-67.88-2.09l-36.91-25.66a17.31 17.31 0 0 0-19.7 0l-31 21.57a62.2 62.2 0 0 1-79.58-7.08l-21.5-21.5a107 107 0 0 1-30.86-87.52c2.7-25 5.57-50.63 8.54-76.1A113.8 113.8 0 0 1 295.78 199l462.35.07a113.87 113.87 0 0 1 113 100.48c3.3 27.95 6.25 54.41 8.77 78.65a107 107 0 0 1-30.91 87l-13.27 13.27a62.51 62.51 0 0 1-74.24 10.4l-39.68-22.04a17.28 17.28 0 0 0-17.31.33l-56.58 34.28a62.2 62.2 0 0 1-32.27 9.06m-95.51-90.21a62.2 62.2 0 0 1 32.76 9.36l53.68 33.22a17.19 17.19 0 0 0 18 .09l56.58-34.29a62.38 62.38 0 0 1 62.48-1.18l39.71 22.05a17.31 17.31 0 0 0 20.57-2.88l13.27-13.27a62.16 62.16 0 0 0 18-50.58c-2.5-24-5.42-50.28-8.7-78A68.84 68.84 0 0 0 758.15 244H295.79a68.79 68.79 0 0 0-68.34 60.84c-3 25.34-5.81 50.81-8.5 75.71a62.22 62.22 0 0 0 17.94 50.88l21.5 21.5a17.25 17.25 0 0 0 22.06 2l31-21.58a62.51 62.51 0 0 1 71.09 0l36.91 25.67a17.27 17.27 0 0 0 18.81.58l49.54-30.12a62.2 62.2 0 0 1 32.33-9.19m104.46 337.56a22.5 22.5 0 0 1-22.5-22.5v-58a76 76 0 0 0-152.1 0v58a22.5 22.5 0 1 1-45 0v-58a121.05 121.05 0 0 1 242.1 0v58a22.5 22.5 0 0 1-22.5 22.5"/><path fill="currentColor" d="M527.05 849.87c-38 0-76.5-1.53-114.4-4.56l-48-3.84a155 155 0 0 1-142.21-142.21l-3.84-48c-3-38.19-3-57.22-3-95.13v-.54a22.5 22.5 0 0 1 45 0v.54c0 36.71 0 55.15 2.91 91.54l3.83 48a110.08 110.08 0 0 0 100.89 100.95l48 3.83c36.81 2.94 74.22 4.48 111.14 4.42 36.7 0 73.87-1.49 110.47-4.42l48-3.83a110.06 110.06 0 0 0 100.95-100.94l3.83-48c2.91-36.39 2.91-54.83 2.91-91.54v-.54a22.5 22.5 0 1 1 45 0v.54c0 37.91 0 56.94-3 95.13l-3.83 48a155 155 0 0 1-142.27 142.2l-48 3.84c-37.78 3-76.15 4.55-114 4.56z"/></svg>
5
+ <!-- #endif -->
6
+ <!-- #ifndef H5 -->
7
+ <image :src="imgSrc" :style="iconBoxStyle" />
8
+ <!-- #endif -->
9
+ <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
10
+ </view>
11
+ </template>
12
+ <script setup>
13
+ import { computed } from 'vue'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-home/home.png'
15
+ const props = defineProps({
16
+ size: { type: [String, Number], default: '1em' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
18
+ label: { type: [String, Number], default: '' },
19
+ labelPos: { type: String, default: 'right' },
20
+ labelSize: { type: [String, Number], default: '15px' },
21
+ labelColor: { type: String, default: '' },
22
+ space: { type: [String, Number], default: '3px' },
23
+ width: { type: [String, Number], default: '' },
24
+ height: { type: [String, Number], default: '' },
25
+ hoverClass: { type: String, default: '' },
26
+ index: { type: [String, Number], default: '' },
27
+ stop: { type: Boolean, default: false }
28
+ })
29
+ const emit = defineEmits(['click'])
30
+ const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
31
+ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
32
+ const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
33
+ const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
34
+ const iconStyle = computed(() => {
35
+ return { color: props.color || 'inherit' }
36
+ })
37
+ const wrapStyle = computed(() => {
38
+ const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
39
+ return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
40
+ })
41
+ const labelStyle = computed(() => {
42
+ return {
43
+ color: props.labelColor || '',
44
+ fontSize: toPx(props.labelSize),
45
+ marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
46
+ marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
47
+ marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
48
+ marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
49
+ }
50
+ })
51
+ function onTap(e) {
52
+ emit('click', props.index)
53
+ if (props.stop && e && e.stopPropagation) e.stopPropagation()
54
+ }
55
+ </script>
56
+ <style scoped>
57
+ .icon__label { line-height: 1; }
58
+ </style>
@@ -1,21 +1,20 @@
1
1
  <template>
2
- <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
2
+ <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
3
3
  <!-- #ifdef H5 -->
4
- <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
5
- <path fill="#0a0a0a" fill-rule="evenodd" d="M12 8a4 4 0 1 1 0 8.001 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="#0a0a0a" fill-rule="evenodd" d="M10.539 2.634a2 2 0 0 1 2.922 0l1.675 1.793 2.453-.083a2 2 0 0 1 2.066 2.067l-.082 2.453 1.792 1.675a2 2 0 0 1 0 2.922l-1.792 1.675.082 2.452a2 2 0 0 1-2.067 2.067l-2.452-.082-1.675 1.792a2 2 0 0 1-2.922 0l-1.675-1.792-2.453.082a2 2 0 0 1-2.067-2.066l.083-2.453-1.793-1.675a2 2 0 0 1 0-2.922l1.793-1.675-.083-2.453a2 2 0 0 1 2.067-2.067l2.453.083zm-.214 3.158a2 2 0 0 1-1.53.634l-2.452-.083.083 2.452a2 2 0 0 1-.634 1.53L4 12l1.792 1.675a2 2 0 0 1 .634 1.53l-.083 2.453 2.452-.084a2 2 0 0 1 1.53.633L12 20l1.675-1.793a2 2 0 0 1 1.53-.633l2.453.084-.084-2.454a2 2 0 0 1 .633-1.529L20 12l-1.793-1.675a2 2 0 0 1-.633-1.53l.084-2.452-2.454.083a2 2 0 0 1-1.529-.634L12 4z" clip-rule="evenodd"/>
6
- </svg>
4
+ <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 8a4 4 0 1 1 0 8.001 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.539 2.634a2 2 0 0 1 2.922 0l1.675 1.793 2.453-.083a2 2 0 0 1 2.066 2.067l-.082 2.453 1.792 1.675a2 2 0 0 1 0 2.922l-1.792 1.675.082 2.452a2 2 0 0 1-2.067 2.067l-2.452-.082-1.675 1.792a2 2 0 0 1-2.922 0l-1.675-1.792-2.453.082a2 2 0 0 1-2.067-2.066l.083-2.453-1.793-1.675a2 2 0 0 1 0-2.922l1.793-1.675-.083-2.453a2 2 0 0 1 2.067-2.067l2.453.083zm-.214 3.158a2 2 0 0 1-1.53.634l-2.452-.083.083 2.452a2 2 0 0 1-.634 1.53L4 12l1.792 1.675a2 2 0 0 1 .634 1.53l-.083 2.453 2.452-.084a2 2 0 0 1 1.53.633L12 20l1.675-1.793a2 2 0 0 1 1.53-.633l2.453.084-.084-2.454a2 2 0 0 1 .633-1.529L20 12l-1.793-1.675a2 2 0 0 1-.633-1.53l.084-2.452-2.454.083a2 2 0 0 1-1.529-.634L12 4z" clip-rule="evenodd"/></svg>
7
5
  <!-- #endif -->
8
6
  <!-- #ifndef H5 -->
9
- <image :src="imgSrc" :style="iconBoxStyle" v-bind="$attrs" />
7
+ <image :src="imgSrc" :style="iconBoxStyle" />
10
8
  <!-- #endif -->
11
9
  <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
12
10
  </view>
13
11
  </template>
14
12
  <script setup>
15
13
  import { computed } from 'vue'
14
+ import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-setting/setting.png'
16
15
  const props = defineProps({
17
16
  size: { type: [String, Number], default: '1em' },
18
- color: { type: String, default: '' },
17
+ color: { type: String, default: 'var(--tsm-color-primary)' },
19
18
  label: { type: [String, Number], default: '' },
20
19
  labelPos: { type: String, default: 'right' },
21
20
  labelSize: { type: [String, Number], default: '15px' },
@@ -33,9 +32,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
33
32
  const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
34
33
  const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
35
34
  const iconStyle = computed(() => {
36
- const s = { }
37
- if (props.color) s.color = props.color
38
- return s
35
+ return { color: props.color || 'inherit' }
39
36
  })
40
37
  const wrapStyle = computed(() => {
41
38
  const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
@@ -51,7 +48,6 @@ const labelStyle = computed(() => {
51
48
  marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
52
49
  }
53
50
  })
54
- const imgSrc = '@/uni_modules/@phill-component/icons/dist/image/png/setting.png'
55
51
  function onTap(e) {
56
52
  emit('click', props.index)
57
53
  if (props.stop && e && e.stopPropagation) e.stopPropagation()