@phill-component/icons 0.1.14 → 0.2.0

package/dist/web/vue/Task.vue

@@ -0,0 +1,57 @@
+<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>
+    <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
+  </view>
+</template>
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  size: { type: [String, Number], default: '1em' },
+  color: { type: String, default: '' },
+  label: { type: [String, Number], default: '' },
+  labelPos: { type: String, default: 'right' },
+  labelSize: { type: [String, Number], default: '15px' },
+  labelColor: { type: String, default: '' },
+  space: { type: [String, Number], default: '3px' },
+  width: { type: [String, Number], default: '' },
+  height: { type: [String, Number], default: '' },
+  hoverClass: { type: String, default: '' },
+  index: { type: [String, Number], default: '' },
+  stop: { type: Boolean, default: false }
+})
+const emit = defineEmits(['click'])
+const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
+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
+})
+const wrapStyle = computed(() => {
+  const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
+  return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
+})
+const labelStyle = computed(() => {
+  return {
+    color: props.labelColor || '',
+    fontSize: toPx(props.labelSize),
+    marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
+    marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
+    marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
+    marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
+  }
+})
+const imgSrc = '__IMG_SRC__'
+function onTap(e) {
+  emit('click', props.index)
+  if (props.stop && e && e.stopPropagation) e.stopPropagation()
+}
+</script>
+<style scoped>
+.icon__label { line-height: 1; }
+</style>

package/dist/web/vue/ToLandscape.vue

@@ -0,0 +1,57 @@
+<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>
+    <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
+  </view>
+</template>
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  size: { type: [String, Number], default: '1em' },
+  color: { type: String, default: '' },
+  label: { type: [String, Number], default: '' },
+  labelPos: { type: String, default: 'right' },
+  labelSize: { type: [String, Number], default: '15px' },
+  labelColor: { type: String, default: '' },
+  space: { type: [String, Number], default: '3px' },
+  width: { type: [String, Number], default: '' },
+  height: { type: [String, Number], default: '' },
+  hoverClass: { type: String, default: '' },
+  index: { type: [String, Number], default: '' },
+  stop: { type: Boolean, default: false }
+})
+const emit = defineEmits(['click'])
+const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
+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
+})
+const wrapStyle = computed(() => {
+  const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
+  return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
+})
+const labelStyle = computed(() => {
+  return {
+    color: props.labelColor || '',
+    fontSize: toPx(props.labelSize),
+    marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
+    marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
+    marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
+    marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
+  }
+})
+const imgSrc = '__IMG_SRC__'
+function onTap(e) {
+  emit('click', props.index)
+  if (props.stop && e && e.stopPropagation) e.stopPropagation()
+}
+</script>
+<style scoped>
+.icon__label { line-height: 1; }
+</style>

package/dist/web/vue/index.js

@@ -0,0 +1,6 @@
+export { default as IconCalendar } from './Calendar.vue';
+export { default as IconFileFold } from './FileFold.vue';
+export { default as IconHome } from './Home.vue';
+export { default as IconSetting } from './Setting.vue';
+export { default as IconTask } from './Task.vue';
+export { default as IconToLandscape } from './ToLandscape.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phill-component/icons",
-  "version": "0.1.14",
+  "version": "0.2.0",
   "description": "Unified icons for phillUI mobile and pc libraries",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/scripts/build.js

@@ -1,4 +1,3 @@
-const svgtofont = require('svgtofont').default;
 const path = require('path');
 const fs = require('fs');
 const { optimize } = require('svgo');
@@ -7,30 +6,32 @@ const Case = require('case');
 const rootDir = path.resolve(__dirname, '..');
 const srcDir = path.resolve(rootDir, 'svg');
 const distDir = path.resolve(rootDir, 'dist');
-const vueDir = path.resolve(distDir, 'vue');
-const uniappDir = path.resolve(distDir, 'uniapp');
-const uniappCompDir = path.resolve(distDir, 'uniapp-components');
-const uniappImgDir = path.resolve(uniappDir, 'images');
-
-// Ensure directories exist
-[distDir, vueDir, uniappDir, uniappCompDir, uniappImgDir].forEach(dir => {
-  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-});
-
-function isMultiColor(svgContent) {
-  const colorRegex = /(fill|stroke)="(?!none|currentColor|\$)(#[0-9a-fA-F]{3,6}|rgba?|hsla?)/gi;
-  const matches = svgContent.match(colorRegex);
-  if (!matches) return false;
-  const colors = new Set(matches.map(m => m.split('"')[1].toLowerCase()));
-  return colors.size > 1;
-}
+// web: 仅供 PC/Web 使用（始终内联 SVG）
+const webDir = path.resolve(distDir, 'web');
+const webVueDir = path.resolve(webDir, 'vue');
+// mobile：供 uni-app 使用（H5 内联 SVG；非 H5 用 PNG/SVG）
+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 => {
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  });
+  
+  // read image files
   const files = fs.readdirSync(srcDir).filter(f => f.endsWith('.svg'));
-  const singleColorIcons = [];
-  const multiColorIcons = [];
   const iconData = [];
   const svgMappings = {};
+  // Optional rasterizer
+  let sharp = null;
+  try { sharp = require('sharp'); } catch (e) { sharp = null; }
 
   console.log(`Building icons from ${srcDir} to ${distDir}...`);
 
@@ -38,17 +39,8 @@ async function build() {
     const name = file.replace('.svg', '');
     const pascalName = Case.pascal(name);
     const content = fs.readFileSync(path.join(srcDir, file), 'utf-8');
-    
-    const multi = isMultiColor(content);
-    
-    // Optimize
+    // Optimize（不区分单/多色，统一按默认优化）
     const svgoPlugins = ['preset-default', 'removeDimensions'];
-    if (!multi) {
-      svgoPlugins.push({
-        name: 'convertColors',
-        params: { currentColor: true }
-      });
-    }
 
     let optimized = optimize(content, { 
       path: file,
@@ -57,78 +49,58 @@ async function build() {
 
     const innerSvg = optimized.replace(/<svg[^>]*>|<\/svg>/g, '');
 
-    // 1. Generate Standard Vue Component (PC/Web)
-    const vueContent = `<template>
-  <svg 
-    viewBox="0 0 24 24" 
-    :width="size" 
-    :height="size" 
-    :fill="multi ? 'none' : color"
-    xmlns="http://www.w3.org/2000/svg"
-    v-bind="$attrs"
-  >
-    ${innerSvg}
-  </svg>
-</template>
-
-<script setup>
-defineProps({
-  size: { type: [String, Number], default: '1em' },
-  color: { type: String, default: 'currentColor' },
-  multi: { type: Boolean, default: ${multi} }
-});
-</script>`;
-    fs.writeFileSync(path.join(vueDir, `${pascalName}.vue`), vueContent);
-
-    // 2. Optimized Standalone SVG for Native/MP
-    if (multi) {
-      multiColorIcons.push(name);
-      // Include multi-color SVG data inline in icons-svg.js
-      // This avoids the need for dynamic imports which don't work with bare module specifiers
-      svgMappings[name] = { inner: innerSvg, multi: true };
-      
-      fs.writeFileSync(path.join(uniappImgDir, file), optimized);
+    // 1) web/vue：始终内联 SVG，供 PC/Web 使用（模板）
+    const webTpl = fs.readFileSync(path.join(__dirname, 'templates/web.vue.tpl'), 'utf-8');
+    const webOut = webTpl.replace('__INNER_SVG__', innerSvg);
+    fs.writeFileSync(path.join(webVueDir, `${pascalName}.vue`), webOut);
+
+    // 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 mobileVueOut = mobileVueTpl
+      .replace('__INNER_SVG__', innerSvg)
+      .replace(/__IMG_SRC__/g, mobileVueImgUrl);
+    fs.writeFileSync(path.join(mobileVueDir, `${pascalName}.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 {
-      singleColorIcons.push(file);
+      console.warn('[icons] "sharp" not found, skip PNG rasterization; X will use SVG image fallback.');
     }
+    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);
 
-    iconData.push({ name, pascalName, multi });
-  }
+    // 4) 输出独立 SVG 文件与 PNG（若已生成）
+    svgMappings[name] = { inner: innerSvg };
+    fs.writeFileSync(path.join(svgDir, file), optimized);
 
-  // 3. Generate Vue Entry
-  const entryContent = iconData.map(i => `export { default as Icon${i.pascalName} } from './vue/${i.pascalName}.vue';`).join('\n');
-  fs.writeFileSync(path.join(distDir, 'index.js'), entryContent);
-
-  // 4. Build Native Font (UniApp Native Single-color)
-  let fontMappings = {};
-  if (singleColorIcons.length > 0) {
-    const tempFontSrc = path.join(rootDir, 'temp-font-src');
-    if (!fs.existsSync(tempFontSrc)) fs.mkdirSync(tempFontSrc);
-    singleColorIcons.forEach(f => fs.copyFileSync(path.join(srcDir, f), path.join(tempFontSrc, f)));
-
-    await svgtofont({
-      src: tempFontSrc,
-      dist: uniappDir,
-      fontName: 'upicon-custom',
-      css: false,
-      outSVGReact: false,
-      outSVGPath: false,
-      typescript: true,
-      emptyDist: false,
-      getIconUnicode: (name, unicode) => {
-        fontMappings[name] = unicode;
-      }
-    });
-    fs.rmSync(tempFontSrc, { recursive: true, force: true });
-    console.log('Native font generated.');
+    iconData.push({ name, pascalName });
   }
 
-  // 5. Generate Mappings for consumers
-  fs.writeFileSync(path.join(uniappDir, 'icons-svg.js'), `export default ${JSON.stringify(svgMappings, null, 2)}`);
-  fs.writeFileSync(path.join(uniappDir, 'icons-generated.js'), `export default ${JSON.stringify(fontMappings, null, 2)}`);
-  fs.writeFileSync(path.join(uniappDir, 'icons-generated.uts'), `export default ${JSON.stringify(fontMappings, null, 2)} as UTSJSONObject`);
-  fs.writeFileSync(path.join(uniappDir, 'icons-custom.json'), JSON.stringify(iconData.map(i => i.name), null, 2));
-  fs.writeFileSync(path.join(uniappDir, 'icons-multicolor.json'), JSON.stringify(multiColorIcons, null, 2));
+  // 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 等映射与其它冗余目录
 
   console.log('All icons built to dist successfully.');
 }

package/scripts/templates/mobile.uvue.tpl

@@ -0,0 +1,66 @@
+<template>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
+    <!-- #ifdef H5 -->
+    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg">
+      __INNER_SVG__
+    </svg>
+    <!-- #endif -->
+    <!-- #ifndef H5 -->
+    <image :src="imgSrc" :style="iconBoxStyle" />
+    <!-- #endif -->
+    <text v-if="label != ''" class="icon__label" :style="labelStyle">{{ label }}</text>
+  </view>
+</template>
+<script setup lang="uts">
+import { computed } from 'vue'
+import imgSrc from '__IMG_SRC__'
+const props = defineProps({
+  size: { type: [String, Number], default: '1em' },
+  color: { type: String, default: '' },
+  label: { type: [String, Number], default: '' },
+  labelPos: { type: String, default: 'right' },
+  labelSize: { type: [String, Number], default: '15px' },
+  labelColor: { type: String, default: '' },
+  space: { type: [String, Number], default: '3px' },
+  width: { type: [String, Number], default: '' },
+  height: { type: [String, Number], default: '' },
+  hoverClass: { type: String, default: '' },
+  index: { type: [String, Number], default: '' },
+  stop: { type: Boolean, default: false }
+})
+const emit = defineEmits(['click'])
+function toPx(v: any): string {
+  if (typeof v === 'number') return (v as number).toString() + 'px'
+  const s = (v as string)
+  return s != '' ? s : ''
+}
+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 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
+  let dir: string = 'row'
+  const cand = map[props.labelPos] as string | null
+  if (cand != null && cand.length > 0) {
+    dir = cand
+  }
+  return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
+})
+const labelStyle = computed((): UTSJSONObject => {
+  const out = {} as UTSJSONObject
+  if (props.labelColor != '') out['color'] = props.labelColor
+  out['fontSize'] = toPx(props.labelSize)
+  out['marginLeft'] = props.labelPos == 'right' ? toPx(props.space) : 0
+  out['marginTop'] = props.labelPos == 'bottom' ? toPx(props.space) : 0
+  out['marginRight'] = props.labelPos == 'left' ? toPx(props.space) : 0
+  out['marginBottom'] = props.labelPos == 'top' ? toPx(props.space) : 0
+  return out
+})
+function onTap(e: UniPointerEvent) {
+  emit('click', props.index)
+  if (props.stop) e.stopPropagation()
+}
+</script>
+<style scoped>
+.icon__label { line-height: 1; }
+</style>

package/scripts/templates/mobile.vue.tpl

@@ -0,0 +1,62 @@
+<template>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="wrapStyle">
+    <!-- #ifdef H5 -->
+    <svg viewBox="0 0 24 24" :width="iconW" :height="iconH" xmlns="http://www.w3.org/2000/svg" v-bind="$attrs" :style="iconStyle">
+      __INNER_SVG__
+    </svg>
+    <!-- #endif -->
+    <!-- #ifndef H5 -->
+    <image :src="imgSrc" :style="iconBoxStyle" v-bind="$attrs" />
+    <!-- #endif -->
+    <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
+  </view>
+</template>
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  size: { type: [String, Number], default: '1em' },
+  color: { type: String, default: '' },
+  label: { type: [String, Number], default: '' },
+  labelPos: { type: String, default: 'right' },
+  labelSize: { type: [String, Number], default: '15px' },
+  labelColor: { type: String, default: '' },
+  space: { type: [String, Number], default: '3px' },
+  width: { type: [String, Number], default: '' },
+  height: { type: [String, Number], default: '' },
+  hoverClass: { type: String, default: '' },
+  index: { type: [String, Number], default: '' },
+  stop: { type: Boolean, default: false }
+})
+const emit = defineEmits(['click'])
+const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
+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
+})
+const wrapStyle = computed(() => {
+  const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
+  return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
+})
+const labelStyle = computed(() => {
+  return {
+    color: props.labelColor || '',
+    fontSize: toPx(props.labelSize),
+    marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
+    marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
+    marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
+    marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
+  }
+})
+const imgSrc = '__IMG_SRC__'
+function onTap(e) {
+  emit('click', props.index)
+  if (props.stop && e && e.stopPropagation) e.stopPropagation()
+}
+</script>
+<style scoped>
+.icon__label { line-height: 1; }
+</style>

package/scripts/templates/web.vue.tpl

@@ -0,0 +1,57 @@
+<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">
+      __INNER_SVG__
+    </svg>
+    <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
+  </view>
+</template>
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  size: { type: [String, Number], default: '1em' },
+  color: { type: String, default: '' },
+  label: { type: [String, Number], default: '' },
+  labelPos: { type: String, default: 'right' },
+  labelSize: { type: [String, Number], default: '15px' },
+  labelColor: { type: String, default: '' },
+  space: { type: [String, Number], default: '3px' },
+  width: { type: [String, Number], default: '' },
+  height: { type: [String, Number], default: '' },
+  hoverClass: { type: String, default: '' },
+  index: { type: [String, Number], default: '' },
+  stop: { type: Boolean, default: false }
+})
+const emit = defineEmits(['click'])
+const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
+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
+})
+const wrapStyle = computed(() => {
+  const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
+  return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
+})
+const labelStyle = computed(() => {
+  return {
+    color: props.labelColor || '',
+    fontSize: toPx(props.labelSize),
+    marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
+    marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
+    marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
+    marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
+  }
+})
+const imgSrc = '__IMG_SRC__'
+function onTap(e) {
+  emit('click', props.index)
+  if (props.stop && e && e.stopPropagation) e.stopPropagation()
+}
+</script>
+<style scoped>
+.icon__label { line-height: 1; }
+</style>

package/dist/index.js

@@ -1,6 +0,0 @@
-export { default as IconCloseCircle } from './vue/CloseCircle.vue';
-export { default as IconHome } from './vue/Home.vue';
-export { default as IconSuccessColor } from './vue/SuccessColor.vue';
-export { default as Icon右箭头 } from './vue/右箭头.vue';
-export { default as Icon店铺 } from './vue/店铺.vue';
-export { default as Icon开通服务 } from './vue/开通服务.vue';

package/dist/uniapp/icons-custom.json

@@ -1,8 +0,0 @@
-[
-  "close-circle",
-  "home",
-  "success-color",
-  "右箭头",
-  "店铺",
-  "开通服务"
-]

package/dist/uniapp/icons-generated.js

@@ -1,7 +0,0 @@
-export default {
-  "close-circle": "",
-  "home": "",
-  "右箭头": "",
-  "店铺": "",
-  "开通服务": ""
-}

package/dist/uniapp/icons-generated.uts

@@ -1,7 +0,0 @@
-export default {
-  "close-circle": "",
-  "home": "",
-  "右箭头": "",
-  "店铺": "",
-  "开通服务": ""
-} as UTSJSONObject

package/dist/uniapp/icons-multicolor.json

@@ -1,3 +0,0 @@
-[
-  "success-color"
-]

package/dist/uniapp/icons-svg.js

@@ -1,6 +0,0 @@
-export default {
-  "success-color": {
-    "inner": "<circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#42b883\"/><path fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" d=\"m17 8-7 7-3-3\"/>",
-    "multi": true
-  }
-}

package/dist/uniapp/images/success-color.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#42b883"/><path fill="none" stroke="#fff" stroke-width="2" d="m17 8-7 7-3-3"/></svg>

package/dist/uniapp/upicon-custom.d.ts

@@ -1,10 +0,0 @@
-export enum UpiconCustom {
-  CloseCircle = "upicon-custom-close-circle",
-  Home = "upicon-custom-home",
-  右箭头 = "upicon-custom-右箭头",
-  店铺 = "upicon-custom-店铺",
-  开通服务 = "upicon-custom-开通服务",
-}
-export type UpiconCustomClassname = "upicon-custom-close-circle" | "upicon-custom-home" | "upicon-custom-右箭头" | "upicon-custom-店铺" | "upicon-custom-开通服务"
-export type UpiconCustomIcon = "close-circle" | "home" | "右箭头" | "店铺" | "开通服务"
-export const UpiconCustomPrefix = "upicon-custom-"

package/dist/uniapp/upicon-custom.svg

@@ -1,27 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs>
-  <font id="upicon-custom" horiz-adv-x="200">
-    <font-face font-family="upicon-custom"
-      units-per-em="200" ascent="200"
-      descent="0" />
-    <missing-glyph horiz-adv-x="0" />
-    <glyph glyph-name="close-circle"
-      unicode="&#xEA01;"
-      horiz-adv-x="24" d="M12 22C6.47 22 2 17.53 2 12S6.47 2 12 2S22 6.47 22 12S17.53 22 12 22zM17 8.41L15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z" />
-    <glyph glyph-name="home"
-      unicode="&#xEA02;"
-      horiz-adv-x="24" d="M10 4V10H14V4H19V12H22L12 21L2 12H5V4z" />
-    <glyph glyph-name="右箭头"
-      unicode="&#xEA03;"
-      horiz-adv-x="200" d="M144.5 107L69.5 182C65.5 186 59.5 186 55.5 182C51.5 178 51.5 172 55.5 168L123.5 100L55.5 32C51.5 28 51.5 22 55.5 18C57.5 16 60 15 62.5 15S67.5 16 69.5 18L144.5 93C148.5 97 148.5 103 144.5 107z" />
-    <glyph glyph-name="店铺"
-      unicode="&#xEA04;"
-      horiz-adv-x="200" d="M160.5291666015625 183.3333333984375C163.0375 183.3333333984375 164.920833203125 182.0833333984375 166.175 180.2083333984375L186.8708333984375 140.2083333984375C187.3875 139.1875 187.479166796875 136.4875 187.4958333984375 135.2L187.5 118.3333333984375C187.5 102.7083333984375 174.3291666015625 89.5833333984375 158.6458333984375 89.5833333984375H150.4916666015625C141.083333203125 89.5833333984375 133.558333203125 92.7083333984375 128.5375 97.7083333984375C123.5208333984375 92.0833333984375 114.7416666015625 88.9583333984375 104.0791666015625 88.9583333984375H95.925C85.2583333984375 88.9583333984375 76.4791666015625 92.0833333984375 71.4625 97.7083333984375C66.4416666015625 92.0833333984375 58.9166666015625 88.9583333984375 49.5041666015625 88.9583333984375H41.3583333984375C25.6666666015625 88.9583333984375 12.5 102.0833333984375 12.5 117.7083333984375V133.5833333984375C12.5083333984375 134.529166796875 12.5625 137.041666796875 13.125 138.3333333984375L29.4375 178.9583333984375C30.0625 181.4583333984375 32.5708333984375 183.3333333984375 35.0791666015625 183.3333333984375H160.5291666015625zM156.95 170.8333333984375H39.6375L25.0333333984375 134.4583333984375L25.0125 134.125L25 133.5833333984375V117.7083333984375C25 109 32.5666666015625 101.4583333984375 41.3541666015625 101.4583333984375H49.5083333984375C55.3958333984375 101.4583333984375 59.55 103.129166796875 62.1333333984375 106.0291666015625L71.4625 116.4875L80.7875 106.0291666015625C83.1541666015625 103.375 88.525 101.458333203125 95.925 101.4583333984375H104.0791666015625C111.475 101.4583333984375 116.845833203125 103.375 119.2125 106.0291666015625L128.0041666015625 115.8875L137.3625 106.5625C140.1541666015625 103.7833333984375 144.6125 102.0833333984375 150.4916666015625 102.0833333984375H158.6458333984375C167.4375 102.0833333984375 175 109.625 175 118.3333333984375V134.5833333984375L174.9958333984375 135.2625L174.9625 136.025L156.95 170.8333333984375zM169.4958333984375 82.6875A6.25 6.25 0 0 0 175.7458333984375 76.4375V37.5A18.75 18.75 0 0 0 156.9958333984375 18.75H43.1916666015625A18.75 18.75 0 0 0 24.4416666015625 37.5V76.4375A6.25 6.25 0 0 0 36.9416666015625 76.4375V37.5A6.25 6.25 0 0 1 43.1916666015625 31.25H156.9958333984375A6.25 6.25 0 0 1 163.2458333984375 37.5V76.4375A6.25 6.25 0 0 0 169.4958333984375 82.6875zM177.8333333984375 143.75V131.25H16.3125V143.75z" />
-    <glyph glyph-name="开通服务"
-      unicode="&#xEA05;"
-      horiz-adv-x="200" d="M100 185.4166666015625C147.175 185.4166666015625 185.4166666015625 147.175 185.4166666015625 100S147.175 14.5833333984375 100 14.5833333984375A85.175 85.175 0 0 0 52.5416666015625 28.975A6.25 6.25 0 1 0 59.4916666015625 39.3583333984375A72.675 72.675 0 0 1 100 27.0833333984375C140.2708333984375 27.0833333984375 172.9166666015625 59.729166796875 172.9166666015625 100S140.2708333984375 172.9166666015625 100 172.9166666015625S27.0833333984375 140.2708333984375 27.0833333984375 100A72.675 72.675 0 0 1 39.3583333984375 59.4916666015625A6.25 6.25 0 0 0 28.975 52.5375A85.175 85.175 0 0 0 14.5833333984375 100C14.5833333984375 147.1791666015625 52.825 185.4208333984375 100 185.4208333984375zM135.6083333984375 118.15A6.25 6.25 0 0 0 144.05 108.9291666015625L105.625 73.7541666015625A22.9166666015625 22.9166666015625 0 0 0 74.1125 74.2875L57.8833333984375 90.1916666015625A6.25 6.25 0 1 0 66.6333333984375 99.1208333984375L82.8625 83.2166666015625A10.4166666015625 10.4166666015625 0 0 1 97.1875 82.975L135.6083333984375 118.15z" />
-  </font>
-</defs>
-</svg>

package/dist/uniapp/upicon-custom.symbol.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:none;"><symbol viewBox="0 0 24 24" id="upicon-custom-close-circle">
-  <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
-</symbol><symbol viewBox="0 0 24 24" id="upicon-custom-home">
-  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
-</symbol><symbol viewBox="0 0 1024 1024" id="upicon-custom-右箭头"><path d="M739.84 476.16l-384-384c-20.48-20.48-51.2-20.48-71.68 0-20.48 20.48-20.48 51.2 0 71.68L632.32 512 284.16 860.16c-20.48 20.48-20.48 51.2 0 71.68 10.24 10.24 23.04 15.36 35.84 15.36s25.6-5.12 35.84-15.36l384-384c20.48-20.48 20.48-51.2 0-71.68z" p-id="1055"></path></symbol><symbol viewBox="0 0 1024 1024" id="upicon-custom-店铺"><path d="M821.909333 85.333333c12.842667 0 22.485333 6.4 28.906667 16l105.962667 204.8c2.645333 5.226667 3.114667 19.050667 3.2 25.642667L960 418.133333c0 80-67.434667 147.2-147.733333 147.2h-41.749334c-48.170667 0-86.698667-16-112.405333-41.6-25.685333 28.8-70.634667 44.8-125.226667 44.8h-41.749333c-54.613333 0-99.562667-16-125.248-44.8-25.706667 28.8-64.234667 44.8-112.426667 44.8H211.754667C131.413333 568.533333 64 501.333333 64 421.333333v-81.28c0.042667-4.842667 0.32-17.706667 3.2-24.32l83.52-208c3.2-12.8 16.042667-22.4 28.885333-22.4h642.304z m-18.325333 64H202.944l-74.773333 186.24-0.106667 1.706667-0.064 2.773333v81.28c0 44.586667 38.741333 83.2 83.733333 83.2h41.749334c30.144 0 51.413333-8.554667 64.64-23.402666l47.765333-53.546667 47.744 53.546667c12.117333 13.589333 39.616 23.402667 77.504 23.402666h41.749333c37.866667 0 65.365333-9.813333 77.482667-23.402666l45.013333-50.474667 47.914667 47.744c14.293333 14.229333 37.12 22.933333 67.221333 22.933333h41.749334c45.013333 0 83.733333-38.613333 83.733333-83.2v-83.2l-0.021333-3.477333-0.170667-3.904L803.584 149.333333zM867.818667 600.64a32 32 0 0 1 32 32V832a96 96 0 0 1-96 96H221.141333a96 96 0 0 1-96-96v-199.36a32 32 0 0 1 64 0V832a32 32 0 0 0 32 32h582.677334a32 32 0 0 0 32-32v-199.36a32 32 0 0 1 32-32z" fill="#111111" p-id="2016"></path><path d="M910.506667 288v64H83.52v-64z" fill="#111111" p-id="2017"></path></symbol><symbol viewBox="0 0 1024 1024" id="upicon-custom-开通服务"><path d="M512 74.666667c241.536 0 437.333333 195.797333 437.333333 437.333333S753.536 949.333333 512 949.333333a436.096 436.096 0 0 1-242.986667-73.685333 32 32 0 1 1 35.584-53.162667A372.096 372.096 0 0 0 512 885.333333c206.186667 0 373.333333-167.146667 373.333333-373.333333S718.186667 138.666667 512 138.666667 138.666667 305.813333 138.666667 512a372.096 372.096 0 0 0 62.848 207.402667 32 32 0 0 1-53.162667 35.605333A436.096 436.096 0 0 1 74.666667 512C74.666667 270.442667 270.464 74.645333 512 74.645333z" fill="#111111" p-id="2016"></path><path d="M694.314667 419.072a32 32 0 0 1 43.221333 47.210667l-196.736 180.096a117.333333 117.333333 0 0 1-161.344-2.730667l-83.093333-81.429333a32 32 0 1 1 44.8-45.717334l83.093333 81.429334a53.333333 53.333333 0 0 0 73.344 1.237333l196.714667-180.096z" fill="#111111" p-id="2017"></path></symbol></svg>