feat: icon

docs/.vitepress/config.ts

@@ -31,7 +31,10 @@ export default defineConfig({
     sidebar: [
       {
         text: '基础组件',
-        items: [{ text: 'Button 按钮', link: '/components/button' }],
+        items: [
+          { text: 'Button 按钮', link: '/components/button' },
+          { text: 'Icon 图标', link: '/components/icon' },
+        ],
       },
       {
         text: '表单输入',

docs/.vitepress/theme/index.css

@@ -1,3 +0,0 @@
-span > svg {
-  display: inline-block;
-}

docs/.vitepress/theme/index.ts

@@ -1,7 +1,16 @@
 import './index.css'
 import DefaultTheme from 'vitepress/theme'
 import { Elenext } from '../../../src'
-import { BeakerIcon, StopIcon, CogIcon, HomeIcon, CloudIcon, BellIcon, CubeIcon, StarIcon } from '@heroicons/vue/24/solid'
+import {
+  BeakerIcon,
+  StopIcon,
+  CogIcon,
+  HomeIcon,
+  CloudIcon,
+  BellIcon,
+  CubeIcon,
+  StarIcon,
+} from '@heroicons/vue/24/solid'
 
 export default {
   ...DefaultTheme,

docs/components/button.md

@@ -124,6 +124,7 @@
     </template>
     图标按钮
   </EButton>
+  <EButton size="md"> 正常按钮 </EButton>
   <EButton size="lg">
     <template #icon>
       <EIcon><CubeIcon /></EIcon>
@@ -221,8 +222,9 @@
   </EButton>
   <EButton variant="square" color="error">
     <template #icon>
-      <EIcon><CubeIcon /></EIcon>
+      <EIcon size="30px"><CubeIcon /></EIcon>
     </template>
   </EButton>
+  <span>沙发斯蒂芬</span>
 </template>
 ```

docs/components/icon.md

@@ -0,0 +1,39 @@
+# EIcon
+
+```vue preview
+<template>
+  <div class="space-x-1">
+    BeakerIcon图标: <EIcon><BeakerIcon /></EIcon>
+
+    StopIcon: <EIcon><StopIcon /></EIcon>
+
+    CogIcon: <EIcon><CogIcon /></EIcon>
+
+    HomeIcon: <EIcon><HomeIcon /></EIcon>
+
+    CloudIcon: <EIcon><CloudIcon /></EIcon>
+
+    BellIcon: <EIcon><BellIcon /></EIcon>
+
+    CubeIcon: <EIcon><CubeIcon /></EIcon>
+
+    StarIcon: <EIcon><StarIcon /></EIcon>
+    <br />
+    BeakerIcon图标: <EIcon spin><BeakerIcon /></EIcon>
+
+    StopIcon: <EIcon spin><StopIcon /></EIcon>
+
+    CogIcon: <EIcon spin><CogIcon /></EIcon>
+
+    HomeIcon: <EIcon spin><HomeIcon /></EIcon>
+
+    CloudIcon: <EIcon spin><CloudIcon /></EIcon>
+
+    BellIcon: <EIcon spin><BellIcon /></EIcon>
+
+    CubeIcon: <EIcon spin><CubeIcon /></EIcon>
+
+    StarIcon: <EIcon spin><StarIcon /></EIcon>
+  </div>
+</template>
+```

src/EButton/EButton.scss

@@ -46,41 +46,56 @@
     opacity: 0.5;
   }
 
-  &--xs {
+  &-xs {
     padding: theme('padding[1.5]') theme('padding[2.5]'); // 30px / w-7 + 2px
     height: calc(theme('width.7') + 2px); // 30px / w-7 + 2px
     font-size: theme('fontSize.xs');
     line-height: theme('lineHeight.4');
+    > .e-btn_icon {
+      margin-left: -0.125rem;
+    }
   }
-  &--sm {
+  &-sm {
     padding: theme('padding[2]') theme('padding[3]'); // 34px / w-8 + 2px
     height: calc(theme('width.8') + 2px); // 34px / w-8 + 2px
     font-size: theme('fontSize.sm');
     line-height: theme('lineHeight.4');
+    > .e-btn_icon {
+      margin-left: -0.125rem;
+    }
   }
-  &--md {
+  &-md {
     padding: theme('padding[2]') theme('padding[4]'); // 38px / w-9 + 2px
     font-size: theme('fontSize.sm');
     line-height: theme('lineHeight.5');
     height: calc(theme('width.9') + 2px); // 38px / w-9 + 2px
+    > .e-btn_icon {
+      margin-left: -0.25rem;
+    }
   }
-  &--lg {
+  &-lg {
     padding: theme('padding[2]') theme('padding[4]'); // 42px / w-10 + 2px
     height: calc(theme('width.10') + 2px); // 42px / w-10 + 2px
     font-size: theme('fontSize.base');
     line-height: theme('lineHeight.5');
+    > .e-btn_icon {
+      margin-left: -0.25rem;
+    }
   }
-  &--xl {
+  &-xl {
     padding: theme('padding[3]') theme('padding[6]'); // 50px / w-12 + 2px
     height: calc(theme('width.12') + 2px); // 50px / w-12 + 2px
     font-size: theme('fontSize.base');
     line-height: theme('lineHeight.5');
+    > .e-btn_icon {
+      margin-left: -0.25rem;
+    }
   }
 
-  &--primary,
-  &--success,
-  &--warning,
-  &--error {
+  &-primary,
+  &-success,
+  &-warning,
+  &-error {
     --e-btn-border-color: transparent;
     --e-btn-text-color: theme('colors.white');
     --e-btn-outline-color: var(--e-btn-bg-color\:hover);
@@ -89,63 +104,64 @@
       --e-btn-text-color\:hover: theme('colors.white');
     }
   }
-  &--primary {
+  &-primary {
     --e-btn-bg-color: theme('colors.primary.600');
     --e-btn-bg-color\:hover: theme('colors.primary.500');
     --e-btn-bg-color\:active: theme('colors.primary.700');
   }
-  &--success {
+  &-success {
     --e-btn-bg-color: theme('colors.success.600');
     --e-btn-bg-color\:hover: theme('colors.success.500');
     --e-btn-bg-color\:active: theme('colors.success.700');
   }
-  &--warning {
+  &-warning {
     --e-btn-bg-color: theme('colors.warning.600');
     --e-btn-bg-color\:hover: theme('colors.warning.500');
     --e-btn-bg-color\:active: theme('colors.warning.700');
   }
-  &--error {
+  &-error {
     --e-btn-bg-color: theme('colors.error.600');
     --e-btn-bg-color\:hover: theme('colors.error.500');
     --e-btn-bg-color\:active: theme('colors.error.700');
   }
 
-  &--round {
+  &-round {
     @apply rounded-full;
   }
-  &--circle {
+  &-circle {
     @apply rounded-full;
   }
-  &--circle,
-  &--square {
+  &-circle,
+  &-square {
     @apply justify-center overflow-hidden whitespace-nowrap px-0;
 
-    &.e-btn--xs {
+    > .e-btn_icon {
+      margin-left: 0;
+    }
+    &.e-btn-xs {
       width: calc(theme('width.7') + 2px); // 30px / w-7 + 2px
     }
-    &.e-btn--sm {
+    &.e-btn-sm {
       width: calc(theme('width.8') + 2px); // 34px / w-8 + 2px
     }
-    &.e-btn--md {
+    &.e-btn-md {
       width: calc(theme('width.9') + 2px); // 38px / w-9 + 2px
     }
-    &.e-btn--lg {
+    &.e-btn-lg {
       width: calc(theme('width.10') + 2px); // 42px / w-10 + 2px
     }
-    &.e-btn--xl {
+    &.e-btn-xl {
       width: calc(theme('width.12') + 2px); // 50px / w-12 + 2px
     }
   }
 
-  &__icon {
-    display: inline-flex;
-    justify-content: center;
-    font-size: 1.25em;
-    + .e-btn__body {
-      margin-left: 0.4em;
-    }
+  > span {
+    display: inline-block;
   }
-  &__body {
-    display: inline-flex;
+
+  > .e-icon {
+    + .e-btn_body {
+      margin-inline-start: 0.4em;
+    }
   }
 }

src/EButton/EButton.vue

@@ -4,7 +4,7 @@ import { computed, useSlots, type PropType } from 'vue'
 
 const props = defineProps({
   variant: {
-    type: String as PropType<'text' | 'subtle' | ''>,
+    type: String as PropType<'text' | 'subtle'>,
   },
   color: {
     type: String as PropType<'primary' | 'success' | 'warning' | 'error'>,
@@ -25,10 +25,8 @@ const cls = computedCls(props, 'e-btn', ['variant', 'color', 'size'])
 </script>
 <template>
   <button :class="[cls]" type="button" :disabled="disabled">
-    <span class="e-btn__icon" v-if="slots.icon">
-      <slot name="icon" />
-    </span>
-    <span class="e-btn__body" v-if="slots.default">
+    <slot name="icon" />
+    <span class="e-btn_body" v-if="slots.default">
       <slot />
     </span>
   </button>

src/EIcon/EIcon.vue

@@ -4,7 +4,7 @@ import { computed, type PropType } from 'vue'
 const props = defineProps({
   size: {
     type: [String, Number] as PropType<string | number>,
-    default: '1em',
+    default: '',
   },
   spin: Boolean,
 })
@@ -26,17 +26,22 @@ const style = computed(() => ({
 }
 
 .e-icon {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   color: inherit;
   font-style: normal;
+  font-size: 1em;
   line-height: 0;
   text-align: center;
   text-transform: none;
   vertical-align: -0.125em;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
+  > svg {
+    width: 1em;
+    height: 1em;
+  }
   &-spin svg {
     animation: e-icon-spin 1s infinite linear;
   }

src/utils/classNames.ts

@@ -56,7 +56,7 @@ export const computedCls = <T extends Record<string, any>>(
       if (typeof val.value === 'boolean' && val.value) {
         cls.push(`is-${tag}`)
       } else if (val.value) {
-        cls.push(`${base}--${val.value}`)
+        cls.push(`${base}-${val.value}`)
       }
     }
     return cls.join(' ')