feat: loadingicon

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "references.preferredLocation": "peek",
-  "tailwindCSS.experimental.configFile": "docs/tailwind.config.js",
-  "eslint.experimental.useFlatConfig": true
+  "tailwindCSS.experimental.configFile": "packages/docs/tailwind.config.cjs",
+  "eslint.experimental.useFlatConfig": true,
+  "eslint.format.enable": true
 }

packages/docs/src/App.tsx

@@ -1,9 +1,9 @@
-import Button from "./Button.mdx"
+import Button from './Button.mdx'
 
 function App() {
   return (
     <>
-      <Button/>
+      <Button />
     </>
   )
 }

packages/docs/src/Button.mdx

@@ -1,3 +1,7 @@
 import { Button } from '@zonda/react'
 
-# Hello <Button>Button</Button>
+# Hello
+
+<Button>Button</Button>
+
+<Button loading>loading</Button>

packages/react/src/components/Button/style.ts

@@ -1,7 +1,6 @@
-import { createColorVars, } from '../../utils/style'
+import { createColorVars } from '../../utils/style'
 import { tw } from '../../utils/tw'
 
-
 const css = tw(
   `z-btn appearance-none inline-flex items-center justify-center text-sm font-medium  transition-colors
   focus-visible:outline-2 focus-visible:outline focus-visible:outline-offset-2`,

packages/react/src/components/Icon/Icon.tsx

@@ -1,3 +1,4 @@
+import type { FC, SVGAttributes } from 'react'
 import { defineComponent, type ExtractPropTypes, type ExtractPublicPropTypes } from 'vue'
 
 const props = {
@@ -6,14 +7,18 @@ const props = {
 
 export type IconProps = ExtractPublicPropTypes<typeof props>
 
+export const Icon: FC<SVGAttributes<SVGElement>> = ({children,...props})=>{
+  <
+}
+
 export const Icon = defineComponent({
   name: 'ZIcon',
   props,
   setup(props, { slots }) {
     return () => (
       <span
         role="img"
-        class={[
+        className={[
           'inline-flex h-[1em] w-[1em] items-center [&>svg]:h-full [&>svg]:w-full',
           props.spin ? 'animate-spin' : '',
         ]}

packages/react/src/components/Icon/LoadingIcon.tsx

@@ -1,15 +1,15 @@
+import type { FC, SVGAttributes } from "react"
 
-
-export function LoadingIcon (){
+export const LoadingIcon: FC<SVGAttributes<SVGElement>> = (props)=>{
   return (
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="1em" height="1em" {...props}>
         <circle
           opacity="0.25"
           cx="12"
           cy="12"
           r="10"
           stroke="currentColor"
-          stroke-width="4"
+          strokeWidth="4"
         />
         <path
           opacity="0.75"

packages/react/src/components/Icon/svgs/ChevronRightIcon.tsx

@@ -12,9 +12,9 @@ export const ChevronRightIcon = defineComponent({
         fill="currentColor"
       >
         <path
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         />
       </svg>
     )

prettier.config.js

@@ -1,6 +1,30 @@
 import prettier from '@jaskang/config/prettier'
 
 export default {
-  ...prettier,
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  // 语句末尾分号
+  semi: false,
+  // 单引号
+  singleQuote: true,
+  // 对象属性加引号
+  quoteProps: 'as-needed',
+  // 在JSX中使用单引号
+  jsxSingleQuote: false,
+  // 在多行逗号分隔的语法结构中，尽可能加尾随逗号
+  trailingComma: 'es5',
+  // 对象中括号之间的空格
+  bracketSpacing: true,
+  // 将多行HTML (HTML, JSX, Vue, Angular)元素的 > 放在最后一行的末尾，而不是单独放在下一行(不适用于自闭元素)。
+  bracketSameLine: false,
+  // Deprecated
+  jsxBracketSameLine: false,
+  // 箭头函数形参周围包含圆括号
+  arrowParens: 'avoid',
+  // 换行行为
+  proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  vueIndentScriptAndStyle: false,
   plugins: ['prettier-plugin-tailwindcss'],
 }

tsconfig.json

@@ -19,6 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "verbatimModuleSyntax": true,
 
     "baseUrl": ".",
     "paths": {