@phill-component/icons 0.2.1 → 1.0.0

package/dist/mobile/vue/{Task.vue → icon-task.vue}

@@ -1,21 +1,20 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
     <!-- #ifdef H5 -->
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <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"/>
-    </svg>
+    <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>
     <!-- #endif -->
     <!-- #ifndef H5 -->
-    <image :src="imgSrc" :style="iconBoxStyle" v-bind="$attrs" />
+    <image :src="imgSrc" :style="iconBoxStyle" />
     <!-- #endif -->
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
 <script setup>
 import { computed } from 'vue'
+import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-task/task.png'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'var(--tsm-color-primary)' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -33,9 +32,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
@@ -51,7 +48,6 @@ const labelStyle = computed(() => {
     marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
   }
 })
-const imgSrc = '@/uni_modules/@phill-component/icons/dist/image/png/task.png'
 function onTap(e) {
   emit('click', props.index)
   if (props.stop && e && e.stopPropagation) e.stopPropagation()

package/dist/mobile/vue/{ToLandscape.vue → icon-to-landscape.vue}

@@ -1,21 +1,20 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
     <!-- #ifdef H5 -->
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <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"/>
-    </svg>
+    <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>
     <!-- #endif -->
     <!-- #ifndef H5 -->
-    <image :src="imgSrc" :style="iconBoxStyle" v-bind="$attrs" />
+    <image :src="imgSrc" :style="iconBoxStyle" />
     <!-- #endif -->
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
 <script setup>
 import { computed } from 'vue'
+import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-to-landscape/to_landscape.png'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'var(--tsm-color-primary)' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -33,9 +32,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
@@ -51,7 +48,6 @@ const labelStyle = computed(() => {
     marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
   }
 })
-const imgSrc = '@/uni_modules/@phill-component/icons/dist/image/png/to_landscape.png'
 function onTap(e) {
   emit('click', props.index)
   if (props.stop && e && e.stopPropagation) e.stopPropagation()

package/dist/web/vue/Calendar.vue

@@ -1,8 +1,6 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <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"/>
-    </svg>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <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>
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
@@ -10,7 +8,7 @@
 import { computed } from 'vue'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'inherit' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -28,9 +26,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }

package/dist/web/vue/FileFold.vue

@@ -1,8 +1,6 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <g filter="url(#a)"><path fill="url(#b)" 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="url(#c)" 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="url(#d)" 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="#000037" 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="#b263fc" 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="#000037" 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="#fff" 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="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".9"/><stop offset="1" stop-color="#fff" stop-opacity=".9"/></linearGradient><linearGradient id="c" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="#02062b" stop-opacity=".4"/><stop offset="1" stop-color="#02062b"/></linearGradient><linearGradient id="d" x1="12.677" x2="12.677" y1=".6" y2="23.4" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f8f8f8" 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>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <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>
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
@@ -10,7 +8,7 @@
 import { computed } from 'vue'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'inherit' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -28,9 +26,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }

package/dist/web/vue/Home.vue

@@ -1,8 +1,6 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <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"/>
-    </svg>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <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>
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
@@ -10,7 +8,7 @@
 import { computed } from 'vue'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'inherit' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -28,9 +26,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }

package/dist/web/vue/Setting.vue

@@ -1,8 +1,6 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <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"/>
-    </svg>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <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>
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
@@ -10,7 +8,7 @@
 import { computed } from 'vue'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'inherit' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -28,9 +26,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }

package/dist/web/vue/Task.vue

@@ -1,8 +1,6 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <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"/>
-    </svg>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <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>
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
@@ -10,7 +8,7 @@
 import { computed } from 'vue'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'inherit' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -28,9 +26,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }

package/dist/web/vue/ToLandscape.vue

@@ -1,8 +1,6 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
-      <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"/>
-    </svg>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <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>
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>
@@ -10,7 +8,7 @@
 import { computed } from 'vue'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'inherit' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -28,9 +26,7 @@ const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
 const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
 const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
 const iconStyle = computed(() => {
-  const s = { }
-  if (props.color) s.color = props.color
-  return s
+  return { color: props.color || 'inherit' }
 })
 const wrapStyle = computed(() => {
   const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phill-component/icons",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "Unified icons for phillUI mobile and pc libraries",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -8,6 +8,7 @@
     "dist",
     "scripts"
   ],
+  "sideEffects": false,
   "bin": {
     "@phill-component/icons": "scripts/install.js"
   },
@@ -26,8 +27,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "case": "^1.6.3",
     "svgo": "^4.0.0",
-    "svgtofont": "^6.5.1",
-    "case": "^1.6.3"
-  }
+    "sharp": "^0.34.5"
+  },
+  "dependencies": {}
 }

package/scripts/build.js

@@ -13,22 +13,17 @@ const webVueDir = path.resolve(webDir, 'vue');
 const mobileDir = path.resolve(distDir, 'mobile');
 const mobileVueDir = path.resolve(mobileDir, 'vue');
 const mobileUvueDir = path.resolve(mobileDir, 'uvue');
-// 静态资源输出到 dist/image/{svg,png}
-const imageDir = path.resolve(distDir, 'image');
-const svgDir = path.resolve(imageDir, 'svg');
-const pngDir = path.resolve(imageDir, 'png');
 
 async function build() {
   // clean dist first, then (re)create subdirs to avoid writeFileSync ENOENT
   if (fs.existsSync(distDir)) fs.rmSync(distDir, { recursive: true, force: true });
-  [distDir, webDir, webVueDir, mobileDir, mobileVueDir, mobileUvueDir, imageDir, svgDir, pngDir].forEach(dir => {
+  [distDir, webDir, webVueDir, mobileDir, mobileVueDir, mobileUvueDir].forEach(dir => {
     if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
   });
   
   // read image files
   const files = fs.readdirSync(srcDir).filter(f => f.endsWith('.svg'));
   const iconData = [];
-  const svgMappings = {};
   // Optional rasterizer
   let sharp = null;
   try { sharp = require('sharp'); } catch (e) { sharp = null; }
@@ -38,16 +33,29 @@ async function build() {
   for (const file of files) {
     const name = file.replace('.svg', '');
     const pascalName = Case.pascal(name);
+    const kebab = Case.kebab(name);
+    const easycomName = `icon-${kebab}`;
     const content = fs.readFileSync(path.join(srcDir, file), 'utf-8');
     // Optimize（不区分单/多色，统一按默认优化）
-    const svgoPlugins = ['preset-default', 'removeDimensions'];
+    const svgoPlugins = [
+      'preset-default',
+      'removeDimensions',
+      {
+        name: 'convertColors',
+        params: {
+          currentColor: true,
+        },
+      },
+    ];
 
     let optimized = optimize(content, { 
       path: file,
       plugins: svgoPlugins
     }).data;
 
-    const innerSvg = optimized.replace(/<svg[^>]*>|<\/svg>/g, '');
+    // 直接在 <svg> 标签上注入 Vue 响应式属性
+    const innerSvg = optimized
+      .replace('<svg', '<svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH"');
 
     // 1) web/vue：始终内联 SVG，供 PC/Web 使用（模板）
     const webTpl = fs.readFileSync(path.join(__dirname, 'templates/web.vue.tpl'), 'utf-8');
@@ -57,48 +65,35 @@ async function build() {
     // 2) mobile/vue（模板）
     const mobileVueTpl = fs.readFileSync(path.join(__dirname, 'templates/mobile.vue.tpl'), 'utf-8');
     // 计算运行时图片 URL（非 H5 使用）
-    const runtimePngUrl = `@/uni_modules/@phill-component/icons/dist/image/png/${name}.png`;
-    const runtimeSvgUrl = `@/uni_modules/@phill-component/icons/dist/image/svg/${name}.svg`;
-    const mobileVueImgUrl = sharp ? runtimePngUrl : runtimeSvgUrl;
+    const runtimePngUrl = `@/uni_modules/@phill-component/icons/mobile/uvue/${easycomName}/${name}.png`;
+    const mobileVueImgUrl = runtimePngUrl;
 
     const mobileVueOut = mobileVueTpl
       .replace('__INNER_SVG__', innerSvg)
       .replace(/__IMG_SRC__/g, mobileVueImgUrl);
-    fs.writeFileSync(path.join(mobileVueDir, `${pascalName}.vue`), mobileVueOut);
+    fs.writeFileSync(path.join(mobileVueDir, `${easycomName}.vue`), mobileVueOut);
 
     // 3) mobile/uvue：H5 用 SVG；非 H5 用 PNG/SVG
-    let targetImgFile = runtimeSvgUrl;
-    if (sharp) {
-      try {
-        const pngPath = path.join(pngDir, `${name}.png`);
-        await sharp(Buffer.from(optimized)).resize(128, 128, { fit: 'contain' }).png().toFile(pngPath);
-        targetImgFile = runtimePngUrl;
-      } catch (e) {
-        console.warn(`[icons] PNG rasterize failed for ${name}:`, e.message);
-      }
-    } else {
-      console.warn('[icons] "sharp" not found, skip PNG rasterization; X will use SVG image fallback.');
+    const uvueComponentdir = path.join(mobileUvueDir, easycomName);
+    if (!fs.existsSync(uvueComponentdir)) fs.mkdirSync(uvueComponentdir, { recursive: true });
+    try {
+      const pngPath = path.join(uvueComponentdir, `${name}.png`);
+      await sharp(Buffer.from(content)).resize(128, 128, { fit: 'contain' }).png().toFile(pngPath);
+    } catch (e) {
+      console.warn(`[icons] PNG rasterize failed for ${name}:`, e.message);
     }
     const mobileUvueTpl = fs.readFileSync(path.join(__dirname, 'templates/mobile.uvue.tpl'), 'utf-8');
     const mobileUvueOut = mobileUvueTpl
       .replace('__INNER_SVG__', innerSvg)
-      .replace(/__IMG_SRC__/g, targetImgFile);
-    fs.writeFileSync(path.join(mobileUvueDir, `${pascalName}.uvue`), mobileUvueOut);
+      .replace(/__IMG_SRC__/g, runtimePngUrl);
+    fs.writeFileSync(path.join(uvueComponentdir, `${easycomName}.uvue`), mobileUvueOut);
 
-    // 4) 输出独立 SVG 文件与 PNG（若已生成）
-    svgMappings[name] = { inner: innerSvg };
-    fs.writeFileSync(path.join(svgDir, file), optimized);
-
-    iconData.push({ name, pascalName });
+    iconData.push({ name, pascalName, kebab });
   }
 
   // 5) 生成入口：web/index.js、mobile/vue/index.js、mobile/uvue/index.uts
   const webEntry = iconData.map(i => `export { default as Icon${i.pascalName} } from './${i.pascalName}.vue';`).join('\n');
   fs.writeFileSync(path.join(webVueDir, 'index.js'), webEntry);
-  const mobileVueEntry = iconData.map(i => `export { default as Icon${i.pascalName} } from './${i.pascalName}.vue';`).join('\n');
-  fs.writeFileSync(path.join(mobileVueDir, 'index.js'), mobileVueEntry);
-  const mobileUtsEntry = iconData.map(i => `export { default as Icon${i.pascalName} } from './${i.pascalName}.uvue'`).join('\n');
-  fs.writeFileSync(path.join(mobileUvueDir, 'index.uts'), mobileUtsEntry);
 
   // 不再输出 icons-svg.js/uts 等映射与其它冗余目录
 

package/scripts/install.js

@@ -58,7 +58,6 @@ function main() {
     ? path.join(srcDir, 'uni_modules')
     : path.join(projectRoot, 'uni_modules');
   const targetPkgDir = path.join(uniModulesBase, '@phill-component/icons');
-  const targetDistDir = path.join(targetPkgDir, 'dist');
 
   const pkgRoot = resolvePackageRoot();
   const sourceDistDir = path.join(pkgRoot, 'dist');
@@ -71,24 +70,50 @@ function main() {
     // Clean old content
     rimraf(targetPkgDir);
     fs.mkdirSync(targetPkgDir, { recursive: true });
-    // Only copy dist (uniapp and vue build outputs)
-    copyDir(sourceDistDir, targetDistDir, exclude);
+    // Copy into package root (no "dist" folder needed for consumers)
+    copyDir(path.join(sourceDistDir, 'mobile'), path.join(targetPkgDir, 'mobile'), exclude);
+    copyDir(path.join(sourceDistDir, 'web'), path.join(targetPkgDir, 'web'), exclude);
     // Lightweight package.json for uni_modules (optional but helps tooling)
     const lightPkgJson = {
       name: 'phillui-icons',
       description: 'Icons assets for phillUI in UniApp uni_modules',
+      main: 'mobile/vue/index.js',
     };
     fs.writeFileSync(path.join(targetPkgDir, 'package.json'), JSON.stringify(lightPkgJson, null, 2));
-    console.log(`[phillui/icons] Installed to ${targetDistDir} ${isX ? '(UniApp X)' : '(UniApp, Exclude .uvue/.uts)'}`);
+    console.log(`[phillui/icons] Installed to ${targetPkgDir} ${isX ? '(UniApp X)' : '(UniApp, Exclude .uvue/.uts)'}`);
 
-    // Simplified: No longer patching vite.config as we use relative paths
-    // patchViteAlias(projectRoot, !!fs.existsSync(srcDir));
+    patchPagesJson(projectRoot, fs.existsSync(srcDir), isX);
   } catch (e) {
     console.error('[phillui/icons] Installation failed:', e.message);
     process.exit(1);
   }
 }
 
+function patchPagesJson(projectRoot, hasSrc, isX) {
+  const pagesPath = hasSrc ? path.join(projectRoot, 'src/pages.json') : path.join(projectRoot, 'pages.json');
+  if (!fs.existsSync(pagesPath)) return;
+
+  try {
+    const raw = fs.readFileSync(pagesPath, 'utf8');
+    const json = JSON.parse(raw);
+    json.easycom = json.easycom || {};
+    json.easycom.autoscan = json.easycom.autoscan !== false;
+    json.easycom.custom = json.easycom.custom || {};
+
+    const key = '^icon-(.*)$';
+    const value = isX
+      ? '@/uni_modules/@phill-component/icons/mobile/uvue/icon-$1/icon-$1.uvue'
+      : '@/uni_modules/@phill-component/icons/mobile/vue/icon-$1.vue';
+    if (json.easycom.custom[key] !== value) {
+      json.easycom.custom[key] = value;
+      fs.writeFileSync(pagesPath, JSON.stringify(json, null, 2));
+      console.log('[phillui/icons] Patched pages.json easycom mapping for icons.');
+    }
+  } catch (e) {
+    console.warn('[phillui/icons] Skip patching pages.json:', e.message);
+  }
+}
+
 function patchViteAlias(projectRoot, hasSrc) {
   const candidates = ['vite.config.ts', 'vite.config.js'].map(f => path.join(projectRoot, f));
   const vitePath = candidates.find(p => fs.existsSync(p));

package/scripts/templates/mobile.uvue.tpl

@@ -1,9 +1,7 @@
 <template>
-  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
     <!-- #ifdef H5 -->
-    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg">
-      __INNER_SVG__
-    </svg>
+    __INNER_SVG__
     <!-- #endif -->
     <!-- #ifndef H5 -->
     <image :src="imgSrc" :style="iconBoxStyle" />
@@ -16,7 +14,7 @@ import { computed } from 'vue'
 import imgSrc from '__IMG_SRC__'
 const props = defineProps({
   size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: '' },
+  color: { type: String, default: 'var(--tsm-color-primary)' },
   label: { type: [String, Number], default: '' },
   labelPos: { type: String, default: 'right' },
   labelSize: { type: [String, Number], default: '15px' },
@@ -36,6 +34,9 @@ function toPx(v: any): string {
 }
 const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
 const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
+const iconStyle = computed((): UTSJSONObject => {
+  return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
+})
 const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
 const wrapStyle = computed((): UTSJSONObject => {
   const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
@@ -46,6 +47,14 @@ const wrapStyle = computed((): UTSJSONObject => {
   }
   return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
 })
+const rootStyle = computed((): UTSJSONObject => {
+  const s = wrapStyle.value
+  const i = iconStyle.value
+  for (const key in i) {
+    s[key] = i[key]
+  }
+  return s
+})
 const labelStyle = computed((): UTSJSONObject => {
   const out = {} as UTSJSONObject
   if (props.labelColor != '') out['color'] = props.labelColor