feat(gui): mount ts instead dist/icon.css

YunYouJun · Jan 12, 2024 · c813b1f · c813b1f · vercel · Jan 12, 2024
1 parent f640810
commit c813b1f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/editor/core/app.vue b/editor/core/app.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import { mountCssVarsRootStyle } from '@advjs/gui/client/styles/icons'
 import { appName } from '~/constants'
 
 useHead({
   title: appName,
 })
+
+onMounted(() => {
+  mountCssVarsRootStyle()
+})
 </script>
 
 <template>

diff --git a/editor/core/nuxt.config.ts b/editor/core/nuxt.config.ts
@@ -38,7 +38,6 @@ export default defineNuxtConfig({
   css: [
     '@unocss/reset/tailwind.css',
     '~/styles/index.scss',
-    '@advjs/gui/dist/icons.css',
   ],
 
   colorMode: {

diff --git a/packages/gui/README.md b/packages/gui/README.md
@@ -5,12 +5,28 @@ GUI for ADV.JS Engine.
 ## Usage
 
 ```ts
-// icons css vars
-import '@advjs/gui/dist/icons.css'
 // common css
 import '@advjs/gui/client/styles/index.scss'
 ```
 
+### Import Icon CSS
+
+```ts
+import '@advjs/gui/dist/icons.css'
+// or
+```
+
+Or you also can import icons by TypeScript:
+
+```ts
+import { mountCssVarsRootStyle } from '@advjs/gui/client'
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  mountCssVarsRootStyle()
+})
+```
+
 ### Nuxt
 
 ```ts

diff --git a/packages/gui/client/index.ts b/packages/gui/client/index.ts
@@ -1,5 +1,6 @@
 import { createAGUI } from './utils'
 
+export * from './styles/icons'
 export * from './types'
 export * from './components'
 export * from './composables'