@phill-component/icons 1.0.2 → 1.0.4

package/dist/web/vue/Filter.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M30 42V22.549a1 1 0 0 1 .463-.844l10.074-6.41A1 1 0 0 0 41 14.45V8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v6.451a1 1 0 0 0 .463.844l10.074 6.41a1 1 0 0 1 .463.844V37"/></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: 'inherit' },
+  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(() => {
+  return { color: props.color || 'inherit' }
+})
+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/Highlight.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M39 43V28a1 1 0 0 0-1-1h-4v-8a1 1 0 0 0-1-1H15a1 1 0 0 0-1 1v8h-4a1 1 0 0 0-1 1v15M19 9.28V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7.28a1 1 0 0 0-1.242-.97l-8 2a1 1 0 0 0-.758.97z"/></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: 'inherit' },
+  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(() => {
+  return { color: props.color || 'inherit' }
+})
+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/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <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>
+    <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M6 19h10m0 0h26m-26 0V9m0 10v10m0 0v10m0-10H6m10 0h26M6 9h36v30H6z"/></svg>
     <text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
   </view>
 </template>

package/dist/web/vue/ObliqueLine.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M29.506 6.502 18.494 41.498"/></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: 'inherit' },
+  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(() => {
+  return { color: props.color || 'inherit' }
+})
+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/OriginalSize.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M34 11.5 39 9h1v32"/><path fill="currentColor" d="M24 17h1v1h-1zm0 13h1v1h-1z"/><path stroke="currentColor" stroke-width="2" d="M24 17h1v1h-1zm0 13h1v1h-1zM5.5 11.5l5-2.5h1v32"/></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: 'inherit' },
+  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(() => {
+  return { color: props.color || 'inherit' }
+})
+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/ZoomIn.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
+    <svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M32.607 32.607A14.95 14.95 0 0 0 37 22c0-8.284-6.716-15-15-15S7 13.716 7 22s6.716 15 15 15c4.142 0 7.892-1.679 10.607-4.393zm0 0L41.5 41.5M29 22H15m7 7V15"/></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: 'inherit' },
+  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(() => {
+  return { color: props.color || 'inherit' }
+})
+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

@@ -1,8 +1,16 @@
+export { default as IconBrush } from './Brush.vue';
 export { default as IconCalendar } from './Calendar.vue';
+export { default as IconCopy } from './Copy.vue';
+export { default as IconEdit } from './Edit.vue';
 export { default as IconFileFold } from './FileFold.vue';
+export { default as IconFilter } from './Filter.vue';
 export { default as IconFindReplace } from './FindReplace.vue';
 export { default as IconH6 } from './H6.vue';
+export { default as IconHighlight } from './Highlight.vue';
 export { default as IconHome } from './Home.vue';
+export { default as IconObliqueLine } from './ObliqueLine.vue';
+export { default as IconOriginalSize } from './OriginalSize.vue';
 export { default as IconSetting } from './Setting.vue';
 export { default as IconTask } from './Task.vue';
-export { default as IconToLandscape } from './ToLandscape.vue';
+export { default as IconToLandscape } from './ToLandscape.vue';
+export { default as IconZoomIn } from './ZoomIn.vue';

package/package.json

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